@extends('admin.layout.master')

@section('content')
    <!-- Content Header (Page header) -->
    <div class="content-header">

        <div class="container-fluid">
            <div class="row ">
                <div class="col-sm-6">
                    <h1 class="m-0">Dashboard</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item active">Dashboard</li>
                    </ol>
                </div><!-- /.col -->
            </div><!-- /.col -->
            <div class="row mt-3">
                <div class="col-lg-3 col-6">

                    <div class="small-box bg-info">
                        <div class="inner">
                            <h3>{{ number_format($active_user + $guest_user) }}</h3>
                            <p>Active Users</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-person"></i>
                        </div>

                    </div>
                </div>


                {{--  <div class="col-lg-3 col-6">

                    <div class="small-box bg-success">
                        <div class="inner">
                            <h3>{{ number_format($total_users) }}</h3>
                            <p>Total Users</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-person"></i>
                        </div>

                    </div>
                </div>  --}}
                <div class="col-lg-3 col-6">

                    <div class="small-box bg-warning">
                        <div class="inner text-white">
                            <h3>{{ number_format($total_orders) }}</h3>
                            <p>Total Orders</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-bag"></i>
                        </div>

                    </div>
                </div>
                {{--  <div class="col-lg-3 col-6">

                    <div class="small-box bg-danger">
                        <div class="inner">
                            <h3>{{ number_format($today_orders) }}</h3>
                            <p>Today Orders</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-bag"></i>
                        </div>

                    </div>
                </div>  --}}

            </div>

        </div><!-- /.container-fluid -->
        @foreach (['danger', 'warning', 'success', 'info'] as $msg)
            @if (Session::has('alert-' . $msg))
                <p class="alert alert-{{ $msg }}">{{ Session::get('alert-' . $msg) }}
                    <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
                </p>
            @endif
        @endforeach


        {{-- <div class="row">
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-header border-0">
                        <div class="d-flex justify-content-between">
                            <h3 class="card-title"># of sales</h3>
                        </div>
                    </div>
                    <div class="card-body">
                        <div>
                            <canvas id="myOrderCountChart"></canvas>
                        </div>
                    </div>
                </div>

            </div>

        </div> --}}

        <div class="row">
            <div class="col-lg-12">
                <div class="card card-body table-responsive" id="getTrendsData" page-url="{{ url('admin/dashboard-trends') }}">
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <div class="card card-body table-responsive" id="getAnnualGMVData" page-url="{{ url('admin/dashboard-annual-gmv') }}">
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <div class="card card-body table-responsive" id="getAnnualOrderData" page-url="{{ url('admin/dashboard-annual-order') }}">
                </div>
            </div>
        </div>
    </div>

    <script>
          $(document).ready(function () {
                $('#getTrendsData').text('Loading Trends Data....');
                var url = $('#getTrendsData').attr('page-url');
                $('#getTrendsData').load(url);


                $('#getAnnualGMVData').text('Loading Annual GMV....');
                var url = $('#getAnnualGMVData').attr('page-url');
                $('#getAnnualGMVData').load(url);

                $('#getAnnualOrderData').text('Loading Orders....');
                var url = $('#getAnnualOrderData').attr('page-url');
                $('#getAnnualOrderData').load(url);
        });
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/peity/3.3.0/jquery.peity.min.js" integrity="sha512-L5mXjK4YbZPFEuunivJM+SKJG5qxqElc8RlaLDRd1Z5TtDACmugfzIRyFnYSGD4jPYoEMJbXhUJFZsBWDV8yLQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    {{-- <script>
        const labels = [
            
        ];

        const data = {
            labels: labels,
            datasets: [{
                label: 'Total by hour',
                data: [
                    
                ],
                backgroundColor: [
                    'rgba(0, 123, 255)'

                ],
                borderColor: [
                    'rgb(0, 123, 255)'

                ],
                borderWidth: 1
            }]
        };


        const config = {
            type: 'bar',
            data: data,
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            },
        };
    </script>
    <script>
        const myChart = new Chart(
            document.getElementById('myOrderCountChart'),
            config
        );
    </script> --}}
@endsection