@extends('layouts.admin')




<link href="https://cdn.datatables.net/r/bs-3.3.5/jq-2.1.4,dt-1.10.8/datatables.min.css" rel="stylesheet" type="text/css">
<script src="https://cdn.datatables.net/r/bs-3.3.5/jqc-1.11.3,dt-1.10.8/datatables.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js" type="text/javascript"></script>

<style type="text/css">
    
    div.dataTables_wrapper  div.dataTables_filter {
  width: 100%;
  float: none;
  text-align: right;
}
</style>


@section('content')

<div class="form-group">
    <div class="input-group input-daterange">
        <input type="text" id="min" class="form-control" value="17 Aug 2020">
        <span class="input-group-addon">to</span>
        <input type="text" id="max" class="form-control" >
    </div>
</div>

 
    
    <h3 style="color: green;">Total Stock IN:{{$allstockinCounter}}</h3>
      <h3 style="color: red;">Total Stock Out:{{$allstockoutCounter}}</h3>
    </div>
<table class="table table-striped table-bordered table-hover table-condensed" id="table-mutasi">
    <thead>
        <tr>               
                             <th>#</th>
                            <th>Date</th>
                           
                            <th> ProductName</th>
                            <th>Stock in </th>
                            <th>Stock out </th>
                            
                            
                        </tr>
    </thead>
    <tbody>
       @foreach($allproducts as $key=>$product)
                        <tr>
                            <td>{{ date('j M Y', strtotime($product->created_at)) }}</td>
                            <td>{{$key+1}}</td>
                            <td>{{$product->rawsmatirals->name}}</td>
                             @if(!empty($product->stock_in))
                            <td style= "background-color: green;">{{$product->stock_in}}</td>
                            @else
                             <td></td>
                            @endif
                            @if(!empty($product->stock_out))
                            <td style= "background-color: red;">{{$product->stock_out}}</td>
                            @else
                             <td></td>
                            @endif
                          
                        </tr>
                        @endforeach
    </tbody>
</table>

   
       
     


<script type="text/javascript">
    // The plugin function for adding a new filtering routine
$.fn.dataTableExt.afnFiltering.push(
    function(oSettings, aData, iDataIndex){
        var dateStart = parseDateValue($("#min").val());
        var dateEnd = parseDateValue($("#max").val());
       
        // aData represents the table structure as an array of columns, so the script access the date value 
        // in the first column of the table via aData[0]
        var evalDate= parseDateValue(aData[0]);

        if (evalDate >= dateStart && evalDate <= dateEnd) {
            return true;
        }
        else {
            return false;
        }
});

// Convert a dd M yyyy date value into a numeric string for comparison (example 12 Oct 2010 becomes 20101012
function parseDateValue(rawDate) {
    var month = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    var dateArray = rawDate.split(" ");
    var numMonth = Number(month.indexOf(dateArray[1]))+1;
    if(numMonth.toString().length<2){
        numMonth = "0"+numMonth;
    } else {
        numMonth = numMonth.toString();
    }
    var parsedDate = dateArray[2] + numMonth + dateArray[0];
    return parsedDate;
}
        
var oTable = $('#table-mutasi').dataTable({
    "iDisplayLength": 25,
    "bStateSave": false,
    "lengthChange": false,
    "ordering": false,
    "info":     false
});

$('#min,#max').datepicker({
    format: "dd M yyyy",
    weekStart: 1,
    daysOfWeekHighlighted: "0",
    autoclose: true,
    todayHighlight: true
});

// Add event listeners to the two range filtering inputs
$("#min").datepicker().on( 'changeDate', function() {
    oTable.fnDraw(); 
});
$("#max").datepicker().on( 'changeDate', function() { 
    oTable.fnDraw(); 
});
</script>


        <!-- /bordered panel body table -->
@endsection

@section('footer-content')
    
@endsection