@extends('layouts.acorn.acorn_admin_app')
@section('header_styles')
    <link rel="stylesheet" href="{{ asset('acorn/css/vendor/glide.core.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('acorn/css/vendor/introjs.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('acorn/css/vendor/select2.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('acorn/css/vendor/select2-bootstrap4.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('acorn/css/vendor/plyr.css') }}" />
@endsection
@section('content')
    <div class="row">
        <div class="col-12 col-xl-6">
            <h2 class="small-title">Stats</h2>
            <div class="row gx-2">
                <div class="col-12 p-0">
                    <div class="glide glide-small" id="statsCarousel">
                        <div class="glide__track" data-glide-el="track">
                            <div class="glide__slides">
                                <div class="glide__slide">
                                    <div class="card mb-5 sh-20 hover-border-primary">
                                        <div
                                            class="h-100 p-4 text-center align-items-center d-flex flex-column justify-content-between">
                                            <div
                                                class="d-flex flex-column justify-content-center align-items-center sh-5 sw-5 rounded-xl bg-gradient-light mb-2">
                                                <i data-acorn-icon="alarm" class="text-white"></i>
                                            </div>
                                            <p class="mb-0 lh-1">Pending Request</p>
                                            {{-- <p class="cta-3 mb-0 text-primary">2</p> --}}
                                            <p class="cta-3 mb-0 text-primary">{{ $pendingServiceRequestCount }}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="glide__slide">
                                    <div class="card mb-5 sh-20 hover-border-primary">
                                        <div
                                            class="h-100 p-4 text-center align-items-center d-flex flex-column justify-content-between">
                                            <div
                                                class="d-flex flex-column justify-content-center align-items-center sh-5 sw-5 rounded-xl bg-gradient-light mb-2">
                                                <i data-acorn-icon="navigate-diagonal" class="text-white"></i>
                                            </div>
                                            <p class="mb-0 lh-1">Processing Request</p>
                                            {{-- <p class="cta-3 mb-0 text-primary">5</p> --}}
                                            <p class="cta-3 mb-0 text-primary">{{ $processingServiceRequestCount }}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="glide__slide">
                                    <div class="card mb-5 sh-20 hover-border-primary">
                                        <div
                                            class="h-100 p-4 text-center align-items-center d-flex flex-column justify-content-between">
                                            <div
                                                class="d-flex flex-column justify-content-center align-items-center sh-5 sw-5 rounded-xl bg-gradient-light mb-2">
                                                <i data-acorn-icon="check-circle" class="text-white"></i>
                                            </div>
                                            <p class="mb-0 lh-1">Completed Request</p>
                                            {{-- <p class="cta-3 mb-0 text-primary">7</p> --}}
                                            <p class="cta-3 mb-0 text-primary">{{ $completedServiceRequestCount }}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="glide__slide">
                                    <div class="card mb-5 sh-20 hover-border-primary">
                                        <div
                                            class="h-100 p-4 text-center align-items-center d-flex flex-column justify-content-between">
                                            <div
                                                class="d-flex flex-column justify-content-center align-items-center sh-5 sw-5 rounded-xl bg-gradient-light mb-2">
                                                <i data-acorn-icon="arrow-bottom-left" class="text-white"></i>
                                            </div>
                                            <p class="mb-0 lh-1">Rejected Request</p>
                                            <p class="cta-3 mb-0 text-primary">4</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="glide__slide">
                                    <div class="card mb-5 sh-20 hover-border-primary">
                                        <div
                                            class="h-100 p-4 text-center align-items-center d-flex flex-column justify-content-between">
                                            <div
                                                class="d-flex flex-column justify-content-center align-items-center sh-5 sw-5 rounded-xl bg-gradient-light mb-2">
                                                <i data-acorn-icon="warning-hexagon" class="text-white"></i>
                                            </div>
                                            <p class="mb-0 lh-1">Unconfirmed Orders</p>
                                            <p class="cta-3 mb-0 text-primary">3</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="glide__slide">
                                    <div class="card mb-5 sh-20 hover-border-primary">
                                        <div
                                            class="h-100 p-4 text-center align-items-center d-flex flex-column justify-content-between">
                                            <div
                                                class="d-flex flex-column justify-content-center align-items-center sh-5 sw-5 rounded-xl bg-gradient-light mb-2">
                                                <i data-acorn-icon="pin" class="text-white"></i>
                                            </div>
                                            <p class="mb-0 lh-1">Missing Orders</p>
                                            <p class="cta-3 mb-0 text-primary">2</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Sales & Stocks Charts Start -->
            <div class="mb-5" data-title="Fancy Charts" data-intro="Some charts over here!" data-step="1">
                <h2 class="small-title">Sales & Stocks</h2>
                <div class="card mb-2 h-auto sh-xl-24">
                    <div class="card-body">
                        <div class="row g-0 h-100 chart-container">
                            <!-- Contents for below are provided from js -->
                            <div
                                class="col-12 col-sm-auto d-flex flex-column justify-content-between custom-tooltip pe-0 pe-sm-4">
                                <p class="heading title mb-1"></p>
                                <div>
                                    <div>
                                        <div class="cta-2 text-primary value d-inline-block align-middle sw-4"></div>
                                        <i class="icon d-inline-block align-middle text-primary" data-acorn-size="15"></i>
                                    </div>
                                    <div class="text-small text-muted mb-1 text"></div>
                                </div>
                                <div class="row">
                                    <div class="col-auto">
                                        <div class="cta-3 text-alternate">84</div>
                                        <div class="text-small text-muted mb-1">THIS WEEK</div>
                                    </div>
                                    <div class="col">
                                        <div class="cta-3 text-alternate">792</div>
                                        <div class="text-small text-muted mb-1">THIS MONTH</div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-sm sh-17">
                                <canvas id="largeLineChart1"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card h-auto sh-xl-24">
                    <div class="card-body">
                        <div class="row g-0 h-100 chart-container">
                            <!-- Contents for below are provided from js -->
                            <div
                                class="col-12 col-sm-auto d-flex flex-column justify-content-between custom-tooltip pe-0 pe-sm-4">
                                <p class="heading title"></p>
                                <div>
                                    <div>
                                        <div class="cta-2 text-primary value d-inline-block align-middle sw-4"></div>
                                        <i class="icon d-inline-block align-middle text-primary" data-acorn-size="15"></i>
                                    </div>
                                    <div class="text-small text-muted mb-1 text"></div>
                                </div>
                                <div class="row">
                                    <div class="col-auto">
                                        <div class="cta-3 text-alternate">84</div>
                                        <div class="text-small text-muted mb-1">THIS WEEK</div>
                                    </div>
                                    <div class="col">
                                        <div class="cta-3 text-alternate">792</div>
                                        <div class="text-small text-muted mb-1">THIS MONTH</div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-sm sh-17">
                                <canvas id="largeLineChart2"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Sales & Stocks Charts End -->


        </div>
    @endsection
    @section('footer_scripts')
        <script src="{{ asset('acorn/js/vendor/Chart.bundle.min.js') }}"></script>
        <script src="{{ asset('acorn/js/vendor/chartjs-plugin-datalabels.js') }}"></script>
        <script src="{{ asset('acorn/js/vendor/chartjs-plugin-rounded-bar.min.js') }}"></script>
        <script src="{{ asset('acorn/js/vendor/glide.min.js') }}"></script>
        <script src="{{ asset('acorn/js/vendor/intro.min.js') }}"></script>
        <script src="{{ asset('acorn/js/vendor/select2.full.min.js') }}"></script>
        <script src="{{ asset('acorn/js/vendor/plyr.min.js') }}"></script>
        <script src="{{ asset('acorn/js/cs/glide.custom.js') }}"></script>
        <script src="{{ asset('acorn/js/cs/charts.extend.js') }}"></script>
        <script src="{{ asset('acorn/js/pages/dashboard.default.js') }}"></script>
        <script type="text/javascript"></script>
    @endsection