@extends('backend.layouts.app')
@section('title', app_name() . ' | ' . __('strings.backend.dashboard.title'))
@push('after-styles')
    {{ style('assets/core_ui/css/style.css') }}
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    {{ style(asset('assets/loading/css/preloader.css')) }}
    {{ script('https://cdn.jsdelivr.net/npm/chart.js') }}
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
@endpush

@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <div class="row">
                        <div class="col-md-4">
                            <input type="text" class="date_range form-control " readonly>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <h3 class="mb-4 text-center">System Outgoing Points</h3>
                    <div class="row">
                        <div class="col-8">
                            <canvas id="systemOutPointsLineChartByMethod"></canvas>
                        </div>
                        <div class="col-4">
                            <canvas id="systemOutPointsPieChartByMethod"></canvas>
                        </div>
                        <div class="col-8">
                            <canvas id="systemOutPointsLineChart"></canvas>
                        </div>
                        <div class="col-4">
                            <canvas id="systemOutPointsPieChart"></canvas>
                        </div>
                    </div>

                    <hr class="my-3">
                    <h3 class="mb-4 text-center">System Incoming Points</h3>
                    <div class="row">
                        <div class="col-8">
                            <canvas id="systemIncomingPointsLineChart"></canvas>
                        </div>
                        <div class="col-4">
                            <canvas id="systemIncomingPointsPieChart"></canvas>
                        </div>
                    </div>

                    <hr class="my-3">
                    <h3 class="mb-4 text-center">Used Coupon Points</h3>
                    <div class="row">
                        <div class="col-8">
                            <canvas id="usedCouponPointsLineChart"></canvas>
                        </div>
                        <div class="col-4">
                            <canvas id="usedCouponPointsPieChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('after-scripts')
    {{ script('https://cdn.jsdelivr.net/momentjs/latest/moment.min.js') }}
    {{ script('https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js') }}
    {{ script(asset('assets/loading/js/jquery.preloader.min.js')) }}
    <script>
        $('.date_range').daterangepicker({
            "showDropdowns": true,
            startDate: moment().subtract(6, 'days'), // Set start date to beginning of this month
            endDate: moment(),
            locale: {
                format: 'YYYY-MM-DD'
            },
            maxSpan: {
                days: 31
            },
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1,
                    'month').endOf('month')]
            },
        })
        startPageLoading();
    </script>
    <script src="{{ asset("assets/js/analytics.js?version=".rand()) }}"></script>
@endpush