@extends($activeTemplate . 'layouts.master')
@section('content')
    <div class="row gy-4 pb-4">
        <div class="col-xxl-3 col-lg-3 col-sm-6">
            <a class="d-block" href="{{route('user.deposit.history')}}">
                <div class="wizard-card d-flex flex-column">
                    <div class="content-wrap d-flex align-items-center justify-content-between gap--12 position-relative">
                        <h6 class="title fw--600 fs--16 mb-2">@lang('Balance')</h6>
                        <div class="icon-wrap d-flex justify-content-center align-items-center position-relative overflow-hidden z--1 position-absolute">
                            <i class="fa-solid fa-dollar-sign"></i>
                        </div>
                    </div>
                    <div class="amount-wrap">
                        <h6 class="amount mb-0 fs--14">{{$general->cur_sym}}{{showAmount($widget['balance'])}}</h6>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-xxl-3 col-lg-3 col-sm-6">
            <a class="d-block" href="{{route('user.orders.index')}}">
                <div class="wizard-card d-flex flex-column">
                    <div class="content-wrap d-flex align-items-center justify-content-between gap--12 position-relative">
                        <h6 class="title fw--600 fs--16 mb-2">@lang('Total Orders')</h6>

                        <div
                            class="icon-wrap d-flex justify-content-center align-items-center position-relative overflow-hidden z--1 position-absolute">
                            <i class="fa-solid fa-cart-shopping"></i>
                        </div>
                    </div>
                    <div class="amount-wrap">
                        <h6 class="amount mb-0 fs--14">{{$widget['total_orders']}}</h6>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-xxl-3 col-lg-3 col-sm-6">
            <a class="d-block" href="{{route('user.orders.index')}}">
                <div class="wizard-card d-flex flex-column">
                    <div class="content-wrap d-flex align-items-center justify-content-between gap--12 position-relative">
                        <h6 class="title fw--600 fs--16 mb-2">@lang('Approved Orders')</h6>
                        <div
                            class="icon-wrap d-flex justify-content-center align-items-center position-relative overflow-hidden z--1 position-absolute">
                            <i class="fa-solid fa-cart-shopping"></i>
                        </div>
                    </div>
                    <div class="amount-wrap">
                        <h6 class="amount mb-0 fs--14">{{$widget['approved_orders']}}</h6>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-xxl-3 col-lg-3 col-sm-6">
            <a class="d-block" href="{{route('ticket')}}">
                <div class="wizard-card d-flex flex-column">
                    <div class="content-wrap d-flex align-items-center justify-content-between gap--12 position-relative">
                        <h6 class="title fw--600 fs--16 mb-2">@lang('Support Tickets')</h6>
                        <div class="icon-wrap d-flex justify-content-center align-items-center position-relative overflow-hidden z--1 position-absolute">
                            <i class="fa-solid fa-headset"></i>
                        </div>
                    </div>
                    <div class="amount-wrap">
                        <h6 class="amount mb-0 fs--14">{{$widget['total_support']}}</h6>
                    </div>
                </div>
            </a>
        </div>
    </div>
    <div class="row gy-4">
        <div class="col-lg-6">
            <div class="base--card bg-white radius--8">
                <div id="chart"></div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="base--card bg-white radius--8">
                <div id="depositchart"></div>
            </div>
        </div>
    </div>
@endsection

@push('script')

    <script src="{{asset('assets/admin/js/apexcharts.min.js')}}"></script>
    <script>
        (function () {
            "use strict";
            var orderOptions = {
                chart: {
                    type: 'bar',
                    height: 400
                },
                series: [{
                    name: 'Products Bought',
                    data: null                }],
                xaxis: {
                    categories: null                },
                colors: ['#51b139'],
                title: {
                    text: 'Monthly Product Purchases',
                    align: 'center'
                }
            };

            var orderChart = new ApexCharts(
                document.querySelector("#chart"),
                orderOptions
            );
            orderChart.render();
        })();

        // [ Deposits Chart ] start
        (function () {
            "use strict";
            var depositOptions = {
                chart: {
                    type: 'bar',
                    height: 400
                },
                series: [{
                    name: 'Deposits',
                    data: null                }],
                xaxis: {
                    categories: null                },
                colors: ['#51b139'],
                title: {
                    text: 'Monthly Deposit Amounts',
                    align: 'center'
                }
            };

            var depositChart = new ApexCharts(
                document.querySelector("#depositchart"),
                depositOptions
            );
            depositChart.render();
        })();
    </script>


@endpush