@extends('admin.layouts.app')
@section('title', 'پنل مدیریت | داشبورد')
@section('content')
    <div class="content-wrapper">
        <div class="content-header">
          <div class="container-fluid">
            <div class="row mb-2">
              <div class="col-sm-12">
                <h1 class="m-0 text-dark">داشبورد</h1>
              </div>
            </div>
          </div>
        </div>
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    @can('manage products')
                        <div class="col-lg-3 col-6">
                            <div class="small-box bg-success">
                                <div class="inner">
                                    <h3>{{ $products }}</h3>
                                    <p>محصولات</p>
                                </div>
                                <div class="icon">
                                    <i class="fa fa-tags"></i>
                                </div>
                                <a href="{{ route('admin.products.index') }}" class="small-box-footer">اطلاعات بیشتر <i class="fa fa-arrow-circle-left"></i></a>
                            </div>
                        </div>
                    @endcan
                    @can('manage users')
                        <div class="col-lg-3 col-6">
                            <div class="small-box bg-warning">
                                <div class="inner">
                                    <h3>{{ $users }}</h3>
                                    <p>کاربران</p>
                                </div>
                                <div class="icon">
                                    <i class="fa fa-users"></i>
                                </div>
                                <a href="{{ route('admin.users.index') }}" class="small-box-footer">اطلاعات بیشتر <i class="fa fa-arrow-circle-left"></i></a>
                            </div>
                        </div>
                    @endcan
                    @can('manage all orders')
                        <div class="col-lg-3 col-6">
                            <div class="small-box bg-danger">
                                <div class="inner">
                                    <h3>{{ $orders }}</h3>
                                    <p>تمام سفارشات</p>
                                </div>
                                <div class="icon">
                                    <i class="fa fa-shopping-bag"></i>
                                </div>
                                <a href="{{ route('admin.orders.index') }}" class="small-box-footer">اطلاعات بیشتر <i class="fa fa-arrow-circle-left"></i></a>
                            </div>
                        </div>
                    @endcan
                    @can('manage menus')
                        <div class="col-lg-3 col-6">
                            <div class="small-box bg-info">
                                <div class="inner">
                                    <h3>{{ $menus }}</h3>
                                    <p>منوساز</p>
                                </div>
                                <div class="icon">
                                    <i class="fa fa-list"></i>
                                </div>
                                <a href="{{ route('admin.menus.index') }}" class="small-box-footer">اطلاعات بیشتر <i class="fa fa-arrow-circle-left"></i></a>
                            </div>
                        </div>
                    @endcan
                    @can('manage articles')
                        <div class="col-lg-3 col-6">
                            <div class="small-box bg-info">
                                <div class="inner">
                                    <h3>{{ $articles }}</h3>
                                    <p>بلاگ</p>
                                </div>
                                <div class="icon">
                                    <i class="fa fa-book"></i>
                                </div>
                                <a href="{{ route('admin.articles.index') }}" class="small-box-footer">اطلاعات بیشتر <i class="fa fa-arrow-circle-left"></i></a>
                            </div>
                        </div>
                    @endcan
                    @can('manage pages')
                        <div class="col-lg-3 col-6">
                            <div class="small-box bg-danger">
                                <div class="inner">
                                    <h3>{{ $pages }}</h3>
                                    <p>صفحات</p>
                                </div>
                                <div class="icon">
                                    <i class="fa fa-newspaper-o"></i>
                                </div>
                                <a href="{{ route('admin.pages.index') }}" class="small-box-footer">اطلاعات بیشتر <i class="fa fa-arrow-circle-left"></i></a>
                            </div>
                        </div>
                    @endcan
                    @can('manage banners')
                        <div class="col-lg-3 col-6">
                            <div class="small-box bg-warning">
                                <div class="inner">
                                    <h3>{{ $banners }}</h3>
                                    <p>بنرها</p>
                                </div>
                                <div class="icon">
                                    <i class="fa fa-bullhorn"></i>
                                </div>
                                <a href="{{ route('admin.banners.index') }}" class="small-box-footer">اطلاعات بیشتر <i class="fa fa-arrow-circle-left"></i></a>
                            </div>
                        </div>
                    @endcan
                    @can('manage settings')
                        <div class="col-lg-3 col-6">
                            <div class="small-box bg-success">
                                <div class="inner">
                                    <h3>{{ $settings }}</h3>
                                    <p>تنظیمات</p>
                                </div>
                                <div class="icon">
                                    <i class="fa fa-cogs"></i>
                                </div>
                                <a href="{{ route('admin.settings.index') }}" class="small-box-footer">اطلاعات بیشتر <i class="fa fa-arrow-circle-left"></i></a>
                            </div>
                        </div>
                    @endcan
                </div>
                @canany(['manage users', 'manage all orders'])
                    <div class="card">
                        <div class="card-header text-center">نمودارهای سایت</div>
                        <div class="card-body">
                            <div class="row">
                                @can('manage users')
                                    <div class="col-lg-10 offset-lg-1 mb-4 border p-3 col-12" id="users_chart" style="height: 400px;"></div>
                                @endif
                                @can('manage all orders')
                                    <div class="col-lg-10 offset-lg-1 mb-4 border p-3 col-12" id="orders_count_chart" style="height: 400px;"></div>
                                    <div class="col-lg-10 offset-lg-1 mb-4 border p-3 col-12" id="orders_price_chart" style="height: 400px;"></div>
                                @endcan
                            </div>
                        </div>
                    </div>
                @endcan
            </div>
        </section>
    </div>
@endsection
@section('footer')
    <script>
        @can('manage users')
            const usersChart = new Chartisan({
                el: '#users_chart',
                url: "@chart('users_chart')",
                hooks: new ChartisanHooks()
                    .colors(['#ffc107'])
                    .responsive()
                    .datasets([{ type: 'line', fill: false }])
                    .options({
                        options: setDefaultChartJsOptions('تعداد کاربران ثبت‌نام شده در ۶ ماه اخیر', true, false)
                    })
            });
        @endcan

        @can('manage all orders')
            const ordersCountChart = new Chartisan({
                el: '#orders_count_chart',
                url: "@chart('orders_count_chart')",
                hooks: new ChartisanHooks()
                    .colors(['#dc3545', '#17a2b8', '#007bff', '#ffc107', '#28a745'])
                    .responsive()
                    .options({
                        options: setDefaultChartJsOptions('تعداد کل سفارشات ثبت شده در ۶ ماه اخیر', true)
                    })
            });

            const ordersPriceChart = new Chartisan({
                el: '#orders_price_chart',
                url: "@chart('orders_price_chart')",
                hooks: new ChartisanHooks()
                    .colors(['#dc3545', '#17a2b8', '#007bff', '#ffc107', '#28a745'])
                    .responsive()
                    .options({
                        options: setDefaultChartJsOptions('میزان فروش کل در ۶ ماه اخیر', true, true, true)
                    })
            });
        @endcan
    </script>
@endsection