@extends('layouts.SellerMasterLayout') @yield('sessions') 
@section('content')

<div class="col-sm-12">
    <div class="panel panel-default card-view">
        <div class="panel-heading">
            <div class="pull-left">
                <h6 class="panel-title txt-dark">View Sales Report </h6>

            </div>




            <div class="clearfix"></div>
        </div>
        <div class="panel-wrapper collapse in">

            <div class="row">

                <div class="col-md-2">

                    <div class="form-group">
                        <label class="control-label mb-5" for="exampleInputuname_1">Select Period</label>

                    </div>

                </div>
                <div class="col-md-4">

                    <div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
                        <i class="fa fa-calendar"></i>&nbsp;
                        <span></span> <i class="fa fa-caret-down"></i>
                    </div>
                    <input type="text" id="datetext" hidden>
                </div>
                <div class="col-md-4">

                    <button type="button" class="btn btn-success btn-sm mr-10" id="filter">Filter</button>

                </div>

            </div>

            <div class="row">

                <div class="col-md-6">

                    <div class="table-responsive">
                        <table class="table mb-0" id="myTable">
                            <thead>
                                <tr>
                                    <th>Item Name</th>
                                    <th>Sold QTY</th>

                                </tr>
                            </thead>
                            <tbody>

                            </tbody>

                            <tfoot>
                                <tr>
                                    <th style="text-align:right">Total Sold:</th>
                                    <th></th>
            
                                </tr>
                            </tfoot>  
                        </table>
                    </div>

                </div>
                <div class="col-md-6">

                    <canvas id="myChart"  height="200"></canvas>

                </div>

            </div>



        </div>
    </div>
</div>

<meta name="_token" content="{{ csrf_token() }}"> 
@section('scripts')

<script type="text/javascript">
    $(function() {
    
        var start = moment().subtract(29, 'days');
        var end = moment();
    
        function cb(start, end) {
            $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
            $('#datetext').val(start.format('YYYY-MM-DD') + '(+)' + end.format('YYYY-MM-DD'));
            
        }
    
        $('#reportrange').daterangepicker({
            startDate: start,
            endDate: end,
            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')]
            }
        }, cb);
    
        cb(start, end);
    
    });

    $("#filter").click(function (){

        var range = $("#datetext").val();

         $.ajaxSetup({
            headers:
                {'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')}
        });

        $.ajax({

            method:"POST",
            url:"/Sellers/filterSales",
            data:{range:range},
            success:function(response){


                    var json = JSON.parse(response);
                    jsonObj = [];
                    
                    var item = [];
                    var qty = [];

                       for (var i in json) {

                                        item.push(json[i].name);
                                        qty.push(json[i].totalqty);
                                        
                        }

                        // alert(item)

                                    var chartdata = {
                                        labels: item,
                                        datasets: [
                                            {
                                                label: 'Sales Chart',
                                                backgroundColor: 'rgba(54, 162, 235, 0.5)',
                                                borderColor: 'rgba(200, 200, 200, 0.1)',
                                                hoverBackgroundColor: 'rgba(153, 102, 255, 0.5)',
                                                hoverBorderColor: 'rgba(200, 200, 200, 1)',
                                                data: qty
                                            }
                                        ]
                                    };

                                    var ctx = document.getElementById("myChart").getContext('2d');
                                    var myChart = new Chart(ctx, {
                                        type: 'bar',
                                        data: chartdata,
                                        options: {
                                            scales: {
                                                yAxes: [{
                                                        ticks: {
                                                            beginAtZero: true
                                                        }
                                                    }]
                                            }
                                        }
                                    });

                $("#myTable").DataTable({
                        
                        data: JSON.parse(response),
                        columns: [
                          
                            {data: 'name'},
                            {data: 'totalqty'},
                          
                         
                        ],
                        destroy: true,
                        "order": [[ 1, "desc" ]],
                        paging:false,
                        "searching": false,
                        "footerCallback": function (row, data, start, end, display) {
                            var api = this.api(), data;

                            // Remove the formatting to get integer data for summation
                            var intVal = function (i) {
                                return typeof i === 'string' ?
                                        i.replace(/[\$,]/g, '') * 1 :
                                        typeof i === 'number' ?
                                        i : 0;
                            };



                            // Total over all pages
                            total = api
                                    .column(1)
                                    .data()
                                    .reduce(function (a, b) {
                                        return intVal(a) + intVal(b);
                                    }, 0);

                            // Total over this page
                            pageTotal = api
                                    .column(1, {page: 'current'})
                                    .data()
                                    .reduce(function (a, b) {
                                        return intVal(a) + intVal(b);
                                    }, 0);

                            // Update footer
                            $(api.column(1).footer()).html(
                                     pageTotal + ' (  ' + total + ' total)'
                                    );
                        }

                    });
                

            }


        });



    })

</script>
@endsection

@endsection