@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 Moving 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 clearfix">
                
                <div class="col-md-6">
                        <h6 class="panel-title txt-dark">Fast Moving Items </h6>

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

                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>

                </div>
                <div class="col-md-6">
                        <h6 class="panel-title txt-dark">Items Not moved</h6>

                    <div class="table-responsive">
                        <table class="table mb-0" id="myTable">
                            <thead>
                                <tr>
                                    <th>Item Name</th>
                                    {{-- <th>Sold in selected period</th> --}}

                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>

                </div>
               

            </div>

            <div class="row" style="margin-top:20px">

                    <div class="col-md-12">
                            <h6 class="panel-title txt-dark">Fast Moving Chart </h6>

                            <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/MovingFilter",
            data:{range:range},
            success:function(response){

                // alert(response)

                    var json = JSON.parse(response.split('(+)')[0]);

    var item = [];
    var qty = [];

      for (var i in json) {
                                        item.push(json[i].name);
                                        qty.push(json[i].totalqty);
                                    }

                                    var chartdata = {
                                        labels: item,
                                        datasets: [
                                            {
                                                label: 'Item Moving',
                                                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,
                        columns: [
                          
                            {data: 'name'},
                            {data: 'totalqty'},
                          
                         
                        ],
                        destroy: true,
                        "order": [[ 1, "desc" ]],
                        paging:false,
                        // "searching": false

                    });
                
                    $("#myTable2").DataTable({
                        
                        data: response.split('(+)')[1],
                        columns: [
                          
                            {data: 'name'},

                          
                         
                        ],
                        destroy: true,
                        "order": [[ 1, "desc" ]],
                        paging:false,
                        // "searching": false

                    });

            }


        });



    })

</script>
@endsection

@endsection