@extends('layouts.admin')
@section('content')
    <div class="ps-main__wrapper">
            <header class="header--dashboard">
                <div class="header__left">
                    <h3>Page Views</h3>
                    <p>Everything here</p>
                </div>
                <div class="header__center">
                    
                </div>
                <div class="header__right"><a class="header__site-link" href="{{ route('view-products', ["sector"=>"all"]) }}"><span>View Store</span><i class="icon-exit-right"></i></a></div>
            </header>
            <section class="ps-dashboard">
                <div class="ps-section__left">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="ps-card ps-card--sale-report">
                                <div class="ps-card__header">
                                    <h4>Reports <p>Last 30 days </p></h4>
                                </div>
                                <div class="ps-card__content">
                                    <div id="chart"></div>
                                </div>
                                <div class="ps-card__footer">
                                    <div class="row">
                                        <div class="col-md-8">
                                            <p>Store Views</p>
                                        </div>
                                        <div class="col-md-4">
                                        <!--<a href="#">Export Report<i class="icon icon-cloud-download ml-2"></i>
                                        </a>-->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--<div class="col-md-4">
                            <div class="ps-card ps-card--earning">
                                <div class="ps-card__header">
                                    <h4>Earnings</h4>
                                </div>
                                <div class="ps-card__content">
                                    <div class="ps-card__chart">
                                        <div id="donut-chart"></div>
                                        <div class="ps-card__information">
                                            <i class="icon icon-wallet"></i>
                                            <strong>$12,560</strong>
                                            <small>Balance</small>
                                        </div>
                                    </div>
                                    <div class="ps-card__status">
                                        <p class="yellow">
                                            <strong> $20,199</strong>
                                            <span>Income</span>
                                        </p>
                                        <p class="red">
                                            <strong> $1,021</strong>
                                            <span>Taxes</span>
                                        </p>
                                        <p class="green">
                                            <strong> $992.00</strong>
                                            <span>Fees</span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>-->
                    </div>
                </div>
                <div class="ps-section__right">
                    <section class="ps-card ps-card--statics">
                        <div class="ps-card__header">
                            <h4>Statics</h4>
                            <div class="ps-card__sortby"><i class="icon-calendar-empty"></i>
                                <div class="form-group--select">
                                    <select class="form-control">
                                        <option value="1">{{Auth::user()->name}}</option>
                                    </select><i class="icon-chevron-down"></i>
                                </div>
                            </div>
                        </div>
                        <div class="ps-card__content">
                            <div class="ps-block--stat yellow">
                                <div class="ps-block__left"><span><i class="icon-users"></i></span></div>
                                <div class="ps-block__content">
                                    <p>Store Views</p>
                                    <h4>{{count($vendors)}}</h4>
                                </div>
                            </div>
                            <div class="ps-block--stat pink">
                                <div class="ps-block__left"><span><i class="icon-cart"></i></span></div>
                                <div class="ps-block__content">
                                    <p>Product Views</p>
                                    <h4>{{count($products)}}</h4>
                                </div>
                            </div>
                            <div class="ps-block--stat green">
                                <div class="ps-block__left"><span><i class="icon-wallet"></i></span></div>
                                <div class="ps-block__content">
                                    <p>Unique Views</p>
                                    <h4>{{count($views)}}</h4>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
            </section>
        </div>
    </main>
    <script src="{{ asset('admin/plugins/apexcharts-bundle/dist/apexcharts.min.js') }}"></script>
<script type="text/javascript">
    
     var viewss  =  null;
     for(var i = 0; i < viewss.length; i++){
            if( (viewss[i] == undefined) || (viewss[i] == null) || (viewss[i] == "") ){
                viewss[i] = 0;
            }
        }
    var dtes =  null;
    var options = {
    series: [{
        name: 'Store Views',
        data: viewss.flat()
    }],
    xaxis: {
        type: 'datetime',
        categories: dtes    
    },
    
    chart: {
        height: 350,
        type: 'area',
        toolbar: {
            show: false
        }
    },
    dataLabels: {
        enabled: true
    },
    stroke: {
        curve: 'smooth'
    },
    colors: ['#fcb800', '#f9f9f9', '#9C27B0'],
    tooltip: {
        x: {
            format: 'dd/MM/yy'
        },
    },

};


var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

</script>

@endsection