@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') }}" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
@endsection
@section('content')
    <div class="row">
        <div class="col-12 mb-4">
            <h2 class="small-title">Stats</h2>
            <div class="row g-3">
                <div class="col-12 col-md-3">
                    <div class="card sh-20 hover-border-primary">
                        <div class="h-100 p-4 text-center d-flex flex-column justify-content-between">
                            <i data-acorn-icon="alarm"></i>
                            <p class="mb-0">Pending Request</p>
                            <p class="cta-3 text-primary">{{ $pendingServiceRequestCount }}</p>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-3">
                    <div class="card sh-20 hover-border-primary">
                        <div class="h-100 p-4 text-center d-flex flex-column justify-content-between">
                            <i data-acorn-icon="navigate-diagonal"></i>
                            <p class="mb-0">Processing Request</p>
                            <p class="cta-3 text-primary">{{ $processingServiceRequestCount }}</p>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-3">
                    <div class="card sh-20 hover-border-primary">
                        <div class="h-100 p-4 text-center d-flex flex-column justify-content-between">
                            <i data-acorn-icon="check-circle"></i>
                            <p class="mb-0">Completed Request</p>
                            <p class="cta-3 text-primary">{{ $completedServiceRequestCount }}</p>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-3">
                    <div class="card sh-20 hover-border-primary">
                        <div class="h-100 p-4 text-center d-flex flex-column justify-content-between">
                            <i data-acorn-icon="grid"></i>
                            <p class="mb-0">Total Request</p>
                            <p class="cta-3 text-primary">{{ $totalCount }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-5">
        <div class="col-12 mb-4">
            <h2 class="small-title">Service Request Chart</h2>
            <div class="row mt-5">
                <div id="chart_container"></div>
            </div>
        </div>
    </div>
        
    <div class="row mt-5"> 
        <div class="col-md-6">
            <h2 class="small-title mt-5">Pending Service Requests</h2>
            <div id="pending_service_request_container"></div>
        </div>
        <div class="col-md-6">
            <h2 class="small-title mt-5">Under review Service Requests</h2>
            <div id="under_review_service_request_container"></div>
        </div>
    </div>

    <div class="row mt-5">
        <div class="col-md-8">
            <h2 class="small-title">Completed Service Requests</h2>
            <div id="completed_request_container"></div>
        </div>
    </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>

    <script>
        $(document).ready(function () {

            $("#pending_service_request_container").load("{{ route('admin-dashboard-pending-service-requests') }}");
            $("#under_review_service_request_container").load("{{ route('admin-dashboard-under-review-service-requests') }}");
            $("#completed_request_container").load("{{ route('admin-dashboard-completed-service-requests') }}");
            $("#chart_container").load("{{ route('admin-dashboard-service-request-chart') }}");
            //    $.ajax({
            //     url: "{{ route('admin-dashboard-pending-service-requests') }}",
            //     method: "GET",
            //     success: function (data) {
            //         console.log("SUCCESS:", data);
            //     },
            //     error: function (xhr) {
            //         console.log("ERROR:", xhr.responseText);
            //     }
            // });

        });


        
    </script>
@endsection