@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>
<meta name="csrf-token" content="{{csrf_token()}}">

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" />
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.js"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> 
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />


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


    
<table  class="table table-striped table-bordered table-hover table-condensed">
    <thead>
        <tr>               
                           
                        <th>ProductName</th>
                        <th>Image</th>
                           <th>Available quantity</th>
                            
                            
                        </tr>
    </thead>
    <tbody>
      @foreach ($rawproducts as $value) 
           
<tr>
             <td><a href="{{ route('product.details',$value->rawsmatirals->id)}}">{{$value->rawsmatirals->name}}</a></td>
             <td><img src="{{$value->rawsmatirals['image'] }}" class="hover_img" height="30px" width="30px" /></td>
             <td>{{$value->quantity}}</td>
         </tr>
           
           @endforeach
       

    </tbody>
</table>

   
       
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

    <script>
        $(document).ready(function () {
            $("#reset").click(function (e) {
                location.reload();
            });

            $('#table1').DataTable({
              "paging": false

});


          

           
        });
    </script>   


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



<script type="text/javascript">

    jQuery(document).ready(function ()

    {
        console.log(1234);
             


          




</script>



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

@section('footer-content')
    
@endsection