@extends('super_admin.layouts.admin')

@section('page-title')
    {{ __('Dashboard') }}
@endsection

@push('theme-script')
    <script src="{{ asset('assets/libs/apexcharts/dist/apexcharts.min.js') }}"></script>
@endpush

@push('script-page')
<script>
    (function () {
        var chartBarOptions = {
            series: [{
                name: '{{ __("Income") }}',
                data: {!! json_encode($chartData['data']) !!}
            }],
            chart: {
                height: 300,
                type: 'area',
                toolbar: { show: false }
            },
            dataLabels: { enabled: false },
            stroke: { width: 2, curve: 'smooth' },
            xaxis: {
                categories: {!! json_encode($chartData['label']) !!},
                title: { text: '{{ __("Months") }}' }
            },
            colors: ['#6fd944'],
            grid: { strokeDashArray: 4 },
            legend: { show: false },
            yaxis: {
                title: { text: '{{ __("Income") }}' }
            }
        };

        new ApexCharts(
            document.querySelector("#chart-sales"),
            chartBarOptions
        ).render();
    })();
</script>
@endpush

@section('content')
<div class="row">

    {{-- Total Businesses --}}
    <div class="col-lg-4 col-md-6">
        <div class="card">
            <div class="card-body p-3">
                <div class="d-flex align-items-center justify-content-between">
                    <div class="d-flex align-items-center">
                        <div class="theme-avtar bg-primary">
                            <i class="ti ti-users"></i>
                        </div>
                        <div class="ms-3">
                            <h6>{{ __('Total Businesses') }}</h6>
                        </div>
                    </div>

                    <div class="number-icon">
                        <h3>{{ $total_businesses }}</h3>
                    </div>

                    <div class="ms-3">
                        <h6>{{ __('Active') }} : {{ $active_businesses }}</h6>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Total Orders --}}
    <div class="col-lg-4 col-md-6">
        <div class="card">
            <div class="card-body p-3">
                <div class="d-flex align-items-center justify-content-between">
                    <div class="d-flex align-items-center">
                        <div class="theme-avtar bg-warning">
                            <i class="ti ti-shopping-cart"></i>
                        </div>
                        <div class="ms-3">
                            <h6>{{ __('Total Orders') }}</h6>
                        </div>
                    </div>

                    <div class="number-icon">
                        <h3>{{ $total_orders }}</h3>
                    </div>

                    <div class="ms-3">
                        <h6>
                            {{ __('Total Revenue') }} :
                            <span class="text-dark">
                                {{ env('CURRENCY_SYMBOL', '₹') }}{{ $total_revenue }}
                            </span>
                        </h6>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Plans --}}
    <div class="col-lg-4 col-md-6">
        <div class="card">
            <div class="card-body p-3">
                <div class="d-flex align-items-center justify-content-between">
                    <div class="d-flex align-items-center">
                        <div class="theme-avtar bg-info">
                            <i class="ti ti-trophy"></i>
                        </div>
                        <div class="ms-3">
                            <h6>{{ __('Total Plans') }}</h6>
                        </div>
                    </div>

                    <div class="number-icon">
                        <h3>{{ $total_plans }}</h3>
                    </div>

                    <div class="ms-3">
                        <h6>
                            {{ __('Most Purchased Plan') }} :
                            <span class="text-dark">{{ $most_purchased_plan }}</span>
                        </h6>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Chart --}}
    <div class="col-xxl-12">
        <h4 class="h4 font-weight-400">{{ __('Recent Revenue') }}</h4>
        <div class="card">
            <div class="chart">
                <div id="chart-sales" class="p-3"></div>
            </div>
        </div>
    </div>

</div>
@endsection