@extends('admin.app.layout')

@section('content')
    <div class="main-content">
        <div class="mainsections">
            <div class="main-section-padding">
                <!-- <h2>Welcome! Yash Rana</h2> -->
                <h6>Dashboard</h6>
                <section class="dashboardblock-sec-1">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-sm-12 col-lg-6 col-xl-4 col-md-6 col-xxl-3 column">
                                <div class="dashboard_block blue">
                                    <div class="dashboard_right">
                                        <img src="../assets/images/total-users.png" alt="dash">
                                    </div>
                                    <div class="dashboard_left">
                                        <p>Total Users</p>
                                        <h3 id="totalUsers">-</h3>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12 col-lg-6 col-xl-4 col-md-6  col-xxl-3 column">
                                <div class="dashboard_block blue">
                                    <div class="dashboard_right dashboard_second">
                                        <img src="../assets/images/active-users.png" alt="dash">
                                    </div>
                                    <div class="dashboard_left">
                                        <p>Active Users</p>
                                        <h3 id="activeUsers">-</h3>
                                    </div>
                                </div>
                            </div>
                            <!-- <div class="col-sm-12 col-lg-6 col-xl-4 col-md-6 col-xxl-3 column">
                                            <div class="dashboard_block blue">
                                                <div class="dashboard_right dashboard_third">
                                                    <img src="../assets/images/f3.svg" alt="dash">
                                                </div>
                                                <div class="dashboard_left">
                                                    <p>Audience</p>
                                                    <h3>108</h3>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-12 col-lg-6 col-xl-4 col-md-6 col-xxl-3 column">
                                            <div class="dashboard_block blue">
                                                <div class="dashboard_right dashboard_four">
                                                    <img src="../assets/images/f4.svg" alt="dash">
                                                </div>
                                                <div class="dashboard_left">
                                                    <p>Notification</p>
                                                    <h3>24</h3>
                                                </div>
                                            </div>
                                        </div> -->
                        </div>
                    </div>
            </div>
            </section>
        @endsection

        @section('js')
            <script>
                $(document).ready(function() {
                    dashboardCount();
                });

                function dashboardCount() {
                    $.ajax({
                        url: "{{ route('getCounts') }}",
                        type: 'POST',
                        data: {
                            '_token': "{{ csrf_token() }}"
                        },
                        dataType: "json",
                        success: function(response, textStatus, xhr) {
                            if (response.status == 1) {
                                $('#totalUsers').html(response.data.totalUsers);
                                $('#activeUsers').html(response.data.activeUsers);
                            } else
                                $.notify(response.msg, "error");
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            $.notify(jqXHR.responseJSON.message, "error");
                        }
                    });
                }
            </script>
        @endsection