@php use Carbon\Carbon; @endphp
@extends('adminlte::page')

@section('title', 'Freecia')

@section('content_header')
    <h1>Dashboard</h1>
@stop

@section('content')

    <div class="row" id="total-sale-statistics">
        @include('partials.dashboard.total-sales')
    </div>
    <!-- /.row -->

    <div class="row">
        <div class="col-md-12">
            <div class="box">
                <div class="box-header with-border">
                    <h3 class="box-title">Sale Report For
                        <a href="#" class="btn btn-info  report-graph" type="day" interval="1 day">Yesterday</a>
                        <a href="#" class="btn btn-info  report-graph" type="week" interval="1 week">Last Week</a>
                        <a href="#" class="btn btn-info  report-graph" type="week" interval="2 week">Last 2 Weeks</a>
                        <a href="#" class="btn btn-info  report-graph" type="day" interval="30 day">Last 30 Days</a>
                        <a href="#" class="btn btn-info  report-graph" type="month" interval="12 month">Last 12
                            Months</a>

                    </h3>


                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                class="fa fa-minus"></i>
                        </button>
                        <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i>
                        </button>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <div class="row">
                        <div class="col-md-12">
                            <p class="text-center">

                            </p>

                            <div class="chart" id="graph-chart">
                                <!-- Sales Chart Canvas -->
                                <canvas id="salesChart" style="height: 200px;"></canvas>
                            </div>
                            <!-- /.chart-responsive -->
                        </div>

                    </div>
                    <!-- /.row -->
                </div>
                <!-- ./box-body -->
                <div class="box-footer">

                    <!-- /.row -->
                </div>
                <!-- /.box-footer -->
            </div>
            <!-- /.box -->
        </div>
    </div>
        <div class="row">
        <div class="col-md-12">
            <div class="box box-danger">
                <div class="box-header with-border">
                    <h3 class="box-title">Orders</h3>

                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                        </button>
                        <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                    </div>
                </div>
                <div class="box-body">
                    <div id="pieChartDiv">
                    <canvas id="pieChart" ></canvas>
                    </div>
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->
        </div>
        <!-- /.col -->
    </div>
    <!-- /.row -->

@stop

@section('js')
    <script src="{{ url('/plugins/bootstrap/js/bootstrap.bundle.min.js')}}"></script>
    <script src="{{ url('/plugins/jquery-sparkline/dist/jquery.sparkline.min.js')}}"></script>

    <!-- jvectormap  -->
    <script src="{{ url('/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js')}}"></script>
    <script src="{{ url('/plugins/jvectormap/jquery-jvectormap-world-mill-en.js')}}"></script>
    <!-- SlimScroll -->
    <script src="{{ url('/plugins/jquery-slimscroll/jquery.slimscroll.min.js')}}"></script>

    <script src="{{ url('/plugins/chart.js/Chart.js')}}"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>

    <script src="{{ url('/js/dashboard2.js')}}"></script>

    <script>
        $(function () {

            $(document).off('click', '.report-graph').on('click', '.report-graph', function (event) {
                event.preventDefault();


                var interval = $(this).attr('interval');
                var type = $(this).attr('type');


                getGraphData(interval, type)

            });


            getOrdersAndTotalSales();
            getGraphData("4 week", "week");

        });

        function getOrdersAndTotalSales() {

            var url = '{{ route('dashboard.data') }}';
            $.ajax({
                type: 'GET',
                data: {_token:"{{ csrf_token() }}"},
                url: url,
                success: function (response) {
                    $('#total-sale-statistics').html(response.totalSales);

                    paiChart(response.orders);
                }
            })
        }

        function getGraphData( interval, type) {

            var requestData = {report_interval: interval, type: type };
            var url = '{{ route('dashboard.graph') }}';
            $.ajax({
                url: url,
                type: 'GET',
                data: requestData,
                success: function (response) {
                    renderGraph(response.report.dates, response.report.values);
                }
            })
        }





    </script>

@stop