@extends('layouts.admin') @section('content')
<!-- Content Header (Page header) -->
<style>
   .lazur-bg {
   background-color: #3498db ;
   color: #ffffff;
   }
   .widget {
   border-radius: 5px;
   padding: 15px 20px;
   margin-bottom: 10px;
   margin-top: 10px;
   }

  .to_form_div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    left: 50%;
    z-index: 10;
    transform: translate(-50%);
  } 
  .serch_form_inr label {
      margin-bottom: 0;
      margin-right: 5px;
  }
  .serch_form_inr {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    justify-content: center;
  }
  .serch_form_inr select{
    border: 1px solid #ced4da;
    width: 150px !important;
    height: 31px;
  }
  .pos_rel{
    position: relative;
  }
  .player_outer{
    display: flex;
    
  }
  .player_outer .player{
    margin-right: 10px
  }
  .img {
  margin-left: auto;
  margin-right: auto;
}
#row-select_wrapper .row:nth-child(2) .col-sm-12{
  overflow-x: scroll;
}
#row-select_wrapper .row:nth-child(2) .col-sm-12 table.table-bordered{
    min-width: 1600px;
}
table.table-bordered.dataTable td:last-child a, 
table.table-bordered.dataTable td:last-child a{
 display: inline-block; 
}

.dataTables_wrapper .dataTables_paginate .paginate_button{
  padding: 0 !important;
  margin-left: 0 !important;
}

 #newitem{
  background-color: transparent;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

#newitem .alert{
  background-color: #666769;
  color: #fff;
  margin: 15px;
}


</style>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.6/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/scroller/1.2.2/css/dataTables.scroller.min.css">
<meta id="ddd" name="csrf_token" content="{{ csrf_token() }}">
<div class="breadcrumbs">
   <div class="col-sm-8">
      <div class="page-header float-left">
         <div class="page-title">
            <h4>Scan <strong>{{$inventoriesname->name}}</strong></h4>
         </div>
      </div>
   </div>
   <div class="col-sm-4">
      <div class="page-header float-right">
         <div class="page-title">
            <ol class="breadcrumb text-right">
               <!--<li><a href="{{url('/admin/dashboard')}}">Dashboard</a></li>-->
               <!--<li><a href="#">Table</a></li>-->
               <li><a href="{{url('/admin/inventories/lists')}}">Inventories</a></li>
               <li class="active">Scan</li>
            </ol>
         </div>
      </div>
   </div>
</div>
@if (session('success'))
         <div class="col-sm-12">
        <div class="alert  alert-success alert-dismissible fade show" role="alert">
                    <span class="badge badge-pill badge-success">Success</span> {{session('success')}}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
       </div>  
       @endif  
<div class="content mt-3">



   <div class="animated fadeIn">
      <div class="row">
         <div class="col-md-12">
            <p class="alert alert-success" id="msg" style="display: none">Quantity Updated Successfully</p>
            <div class="card">
               <div class="card-header">
                  <div class="col-lg-4">
                     <div class="widget style1 lazur-bg">
                        <div class="row">
                           <div class="col-sm-8">
                              <h6 class="font-bold">Total Units
                              </h6>
                           </div>
                           <div class="col-sm-4">
                              <h5 class="font-bold" id="total_units">
                                 <span id="total-quantity">{{$totalunitquantity}}
                                 </span>
                              </h5>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="col-lg-4">
                     <div class="widget style1 lazur-bg">
                        <div class="row">
                           <div class="col-sm-8">
                              <h6 class="font-bold">Total Cases
                              </h6>
                           </div>
                           <div class="col-sm-4">
                              <h5 class="font-bold" id="total_units">
                              <span id="total-casequantity">{{$totalcasequantity}}</span>

                              </h5>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="col-lg-4">
                     <div class="widget style1 lazur-bg">
                        <div class="row">
                           <div class="col-sm-4">
                              <h6 class="font-bold">Total Value
                              </h6>
                           </div>
                           <div class="col-sm-8">
                              <h5 class="font-bold" id="total_units">
                              <span id="total-value">  
                              ${{number_format($totalpricevalue,2)}}
                              </span>
                              </h5>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
                <div id="newitem" style="display: none;">
                  <div class="alert info col-md-5">
                    <strong>Info!</strong> New Item
                  </div>
                </div>

               
               
               <div class="card-header">
                  <!--<strong class="card-title">Recently Scanned</strong>-->
                  <div class="col-lg-8">
                     <strong class="card-title">Recently Scanned
                     </strong>
                  </div>
                  <div class="col-lg-4">
                     <a style="float: right;" href="{{url('/admin/inventories/exportUserData/'.$inventoriesname->id)}}" type="button" class="btn btn-primary" data-toggle="tooltip" title="Export">Inventory Export
                     </a> 
                     
                    <a style="float: right;" href="{{url('/admin/inventories/delete/'.$id)}}" class="btn btn-primary remove-record" data-toggle="modal" data-url="{{url('/admin/inventories/delete/'.$id)}}" data-id="{{$id}}" data-target="#custom-width-modal-inventory" title="Delete">Delete Inventory</a>
                   </div>  
                   
               </div>
               <div class="card-body pos_rel">
                 
                  <div class="search_status">
                    <div class="form-group">
                      <label>Locations: </label>
                      <select class="form-control" id='searchByStatus'>
                        <option value=''>All</option>
                          @if(isset($allLocation))
                            @foreach($allLocation as $key => $value)
                              @if(!empty($value))
                                <option @if(isset($location_id)) @if($value->id == $location_id) selected @endif  @endif value="{{$value->id}}">{{$value->name}}</option>
                              @endif
                            @endforeach
                          @endif
                      </select>
                    </div>
                    <div class="form-group">
                      <label>Barcode: </label>
                      <input type="text" class="form-control" id="searchByBarcode" value="">
                    </div>
                  </div>

                  <div id="replace">
                  @if(count($inventories) > 0)
                  <table id="inventoytable" class="table table-striped table-bordered">
                     <thead>
                        <tr>
                          @if(isset($fields)) 
                             <th>Sr.No</th>
                             <th>Image</th>
                             <th>Location</th>
                             <th>Input Code</th>
                             
                             @foreach($fields as $key => $value)
                              @if($value->field_name!="image")
                                <th>{{$value->field_name}}</th>
                                @endif
                             @endforeach
								<th>Scan By</th>
                                <th>Action</th> 
                                
                          @endif 
                        </tr>
                     </thead>
                  </table>
                  @else
                  <table id="noRecord" class="table table-striped table-bordered">
                     <thead>
                        <tr>
                          @if(isset($fields)) 
                             <th>Sr.No</th>
                             <th>Image</th>
							               <th>Location</th>
                            <th>Input Code</th>
                             @foreach($fields as $key => $value)
                              @if($value->field_name!="image")
                                <th>{{$value->field_name}}</th>
                                @endif
                             @endforeach
                            <th>Scan By</th>   
							<th>Action</th> 
                                
                          @endif 
                        </tr>
                     </thead>
                  </table>
                  @endif
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <!-- .animated -->
</div>


  
<div id="imageLink">
	<div class="player_outer"> 
    <div class="result-data"></div>
    <img id="imgloader" style="display:none" src="{{url('/img/loading.gif')}}">
  </div>
   
</div>


<!-- .content -->
<div class="modal fade" id="myview" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header" style="background-color: #007bff";>
            <span class="modal-title" style="color: #fff;">Inventory Item Information</span>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
         </div>
         <div class="modal-body viewdone">
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
         </div>
      </div>
   </div>
</div>
<!-- /.modal -->

 <div id="custom-width-modal-inventory"  class="modal fade" tabindex="-1" role="dialog" aria-labelledby="custom-width-modalLabel" aria-hidden="true" style="display: none;">
          <div class="modal-dialog" style="width:55%;">
            <form action="" method="POST" class="remove-record-model">
                 {{ csrf_field() }}
               <div class="modal-content">
                  <div class="modal-header">
                     <div>Delete Inventory</div>
                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                  </div>
                  <div class="modal-body">
                     <h4>Are you sure want to delete this inventory?</h4>
                  </div>
                  <div class="modal-footer">
                     <button type="button" class="btn btn-default waves-effect remove-data-from-delete-form" data-dismiss="modal">Close</button>
                     <button data-token="{{ csrf_token() }}" type="submit" class="btn btn-primary">Delete</button>
                  </div>
               </div>
            </form>
          </div>
       </div>
<script src="https://cdn.datatables.net/1.10.6/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/scroller/1.2.2/js/dataTables.scroller.min.js
"></script>       
<script>
$(function(){
    $("#noRecord").dataTable({
      "scrollX": true,

    });
 })

$(document).ready(function() {
  var old_count = 0;
  var i = 0;
  var DataTable ;
  var id = "{{$id}}";
  var csrf = $('meta[name="csrf_token"]').attr('content');
 
   DataTable = $('#inventoytable').DataTable({
        "processing": true,
        "serverSide": true,
        "ordering": true,
        "order": [[ 0, "desc" ]],
       	"scrollX": true,
        "ajax": {
                 headers: {
                  'X-CSRF-TOKEN': csrf
                  },
                 url:'{{ url('/admin/inventory/dataTablelists/') }}/'+id,
                 method:"POST",
                 'data' : function(data){
                  var locationname = $('#searchByStatus').val();
                  var barcode = $('#searchByBarcode').val();
                  data.locationname = locationname;
                  data.barcode = barcode;
                   
                }
            },
      
        "columns":  

    });

   $('#searchByStatus').change(function(){
      DataTable.draw();
    });
   $('#searchByBarcode').keyup(function(){
      DataTable.draw();
    });
    
    setInterval(function () {
     $.ajax ({
              type: 'get',
              url: "{{url('admin/inventories/getNotificationforNewitesms')}}"+'/'+id,
              success : function(response) {
                  $("#total-quantity").html(response.totalunitquantity)
                  $("#total-casequantity").html(response.totalcasequantity)
                  $("#total-value").html('$'+response.totalvalue)
                 if (response.itemCount > old_count) {
                    if (i == 0){
                      old_count = response.itemCount;
                    } 
                    else
                    {
                      $('#newitem').show('3000');
                       setTimeout(function() {
                          $('#newitem').hide('5000')
                        }, 5000);

                      old_count = response.itemCount;
                      
                    }
                  } 
                  i=1; 
                 
              },error:function(e){
              //alert("error");
              }
      }); 
    DataTable.ajax.reload(null, false);
    }, 20000 );
    $(document).on('click', '.imageview', function () {
        var tr = $(this).parents('tr');
        var row = DataTable.row(tr);
        var tr_id = $(this).attr('data-id');

        if($(this).parents('tr').hasClass('shown')){
           //$(this).removeClass('shown');
            row.child.hide();
            tr.removeClass('shown');
        }else{
            $('#inventoytable > tbody > tr').each(function() {
                var ntr_id = $(this).attr('id');
                if($(this).hasClass('shown') && tr_id != ntr_id) {
                var ntr = DataTable.row($(this));
                $(this).removeClass('shown');       
                ntr.child.hide();
                ntr.child().find('.player_outer').html('');
                }
            });

              var csrf = $('meta[name="csrf_token"]').attr('content');
              var userIdentification = $(this).attr('data-id');
              $(".result-data").html(''); 
              $('#imgloader').show();
              $.ajax ({
                type: 'POST',
                url: "{{url('admin/inventories/getImage')}}"+'/'+userIdentification,
                data: {'_token': csrf},
                success : function(response) {
                  $('#imgloader').hide();
                  $(".result-data").html(response.html);
                },
                error:function(e){
                  $('#imgloader').hide();
                  $(".result-data").html("Unable to process right now");
                }
              });
              if ( row.child.isShown() ) {
                    row.child.hide();
                    tr.removeClass('shown');
              }
              else {
                  row.child(format()).show();
                  row.child().find('.player').slideDown();
                  tr.addClass('shown');
              }
        }

       
        
        
    });

});




$(function() {

    // for fancybox library
    $('.fancybox').fancybox({
      padding: [5,5,5,5],
    });
   }); 


   function reply_click(id,item_id,location_id) {
     var id = id;
     var item_id = item_id;
     var location_id = location_id;
    // alert(location_id);
     var csrf = $('meta[name="csrf_token"]').attr('content');
      var url ="{{url('admin/inventories/viewitem/')}}"+'/'+id+'/'+item_id+'/'+location_id;
          $.ajax({
         url:url,
         type: 'POST',
         data: {'_token': csrf},
         dataType: 'json',
        success: function( response ){
             console.log( response.html );
             $(".viewdone").html(response.html);
            },
            error: function( e ) {
                console.log(e);
            }
   });
   }


</script>


<script>

  function format () {
    var html=document.getElementById('imageLink').innerHTML;
    return html;
  }

  
/*var old_count = 0;
var i = 0; 
function getRefresh(){
    jQuery(document).ready(function($) {
            var inventory_id = "{{$id}}";
            //var i = 0;
            $.ajax ({
                    type: 'get',
                    url: "{{url('admin/inventories/inventorydetail')}}"+'/'+inventory_id,
                    success : function(response) {
                      
                        $("#replace").html(response.html);
                        $("#total-quantity").html(response.totalunitquantity)
                        $("#total-casequantity").html(response.totalcasequantity)
                        $("#total-value").html(response.totalvalue)
                       if (response.itemCount > old_count) {
                          if (i == 0){
                            old_count = response.itemCount;
                          } 
                          else
                          {
                            $('.notify').css("background-color","red").show().delay(2000).removeAttr("background-color");
                            old_count = response.itemCount;
                          }
                        } 
                        i=1; 
                       
                    },error:function(e){
                    //alert("error");
                    }
                });
    });
}*/
//setInterval(getData, 10000);
</script>


@endsection