@extends('admin/app/layout')
@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-auto col-md-auto col-sm-auto col-12">
                <div class="white_bx">
                    <div class="left">
                        <div class="green_bg icon_mx">
                            <img src="{{ asset('admin-assets/images/3.png') }}">
                        </div>
                    </div>
                    <div class="middal">
                        <span>Total products </span>
                        <h4 id="totalProducts"></h4>
                    </div>
                </div>
            </div>
            <div class="col-lg-auto col-md-auto col-sm-auto col-12">
                <div class="white_bx">
                    <div class="left">
                        <div class="green_bg icon_mx">
                            <img src="{{ asset('admin-assets/images/4.png') }}">
                        </div>
                    </div>
                    <div class="middal">
                        <span>Active products</span>
                        <h4 id="activeProducts"></h4>
                    </div>
                </div>
            </div>
            <div class="col-lg-auto col-md-auto col-sm-auto col-12">
                <div class="white_bx">
                    <div class="left">
                        <div class="green_bg icon_mx">
                            <img src="{{ asset('admin-assets/images/1.png') }}">
                        </div>
                    </div>
                    <div class="middal">
                        <span>Total users </span>
                        <h4 id="totalUsers"></h4>
                    </div>
                </div>
            </div>
            <div class="col-lg-auto col-md-auto col-sm-auto col-12">
                <div class="white_bx">
                    <div class="left">
                        <div class="green_bg icon_mx">
                            <img src="{{ asset('admin-assets/images/2.png') }}">
                        </div>
                    </div>
                    <div class="middal">
                        <span>Total orders placed</span>
                        <h4 id="totalOrders"></h4>
                    </div>
                </div>
            </div>
        </div>

    </div>
@endsection
@section('js')
    <script>
        $(document).ready(function() {
            $.ajax({
                url: "{{ route('getDashboardCount') }}",
                type: 'POST',
                data: {
                    '_token': "{{ csrf_token() }}"
                },
                dataType: "json",
                success: function(response) {
                    $('#totalProducts').text(response.totalProducts);
                    $('#activeProducts').text(response.activeProducts);
                    $('#totalUsers').text(response.totalUsers);
                    $('#totalOrders').text(response.totalOrders);
                }
            });
        });
    </script>
@endsection