@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>

        <p></p>


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



            <div class="row">

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

                    <div class="table-responsive">
                        <table class="table mb-0" id="myTable">
                            <thead>
                                <tr>
                                    <th>Order No</th>
                                    <th>Item Name</th>
                                    <th>Qty</th>
                                    <th>Confirm Time</th>
                                    <th>Ready Time</th>
                                    <th>Time Elapsed</th>

                                </tr>
                            </thead>
                            <tbody>

                                @foreach ($itemtable as $item)
                                {{-- ->select('items.name','orders.subtotal', 'orders.qty', 'orders.ready_time', 
                                'orders.confirm_time',  'orders.status', 'orders.invoice_date', 'orders.order_id') --}}


                                <tr>

                                <td>{{$item->order_id}}</td>
                                <td>{{$item->name}}</td>
                                <td>{{$item->qty}}</td>
                                <td>{{$item->confirm_time}}</td>
                                <td>{{$item->ready_time}}</td>
                                <td>
                                    
                                    00:0:0
                                </td>

                                </tr>
                                    
                                @endforeach

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

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

                    <canvas id="myChart" width="400" height="400"></canvas>

                </div>

            </div>



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

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

</div>

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

<script type="text/javascript">
  
    $(document).ready(function(){


       var json = JSON.parse("{{$json}}".replace(/&quot;/g,'"'))

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

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

        var chartdata = {
                                        labels: item,
                                        datasets: [
                                            {
                                                label: 'Time Elapsed',
                                                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
                                                        }
                                                    }]
                                            }
                                        }
                                    }); 

    })


//     $("#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){

//                     var json = JSON.parse(response);
//                     jsonObj = [];
//                $.each(json, function(key, value){
                
//                 item = {}
//         item ["name"] = key;
//         item ["qty"] = value

//          jsonObj.push(item);
//         // alert(jsonObj)
// });

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

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

//                                    

//                 $("#myTable").DataTable({
                        
//                         data: jsonObj,
//                         columns: [
                          
//                             {data: 'name'},
//                             {data: 'qty'},
                          
                         
//                         ],
//                         destroy: true,
//                         "order": [[ 1, "desc" ]],
//                         paging:false,
//                         // "searching": false

//                     });
                

//             }


//         });



//     })

</script>
@endsection

@endsection