@extends('layouts.admin')
<style type="text/css">

 .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;
    padding: 0px;
  }
  .pos_rel{
    position: relative;
  }
  .dataTables_wrapper .dataTables_paginate .paginate_button {
  
  padding: 0 !important;
  
}
  #example_wrapper table{
    width: 1400px !important;
    min-width: 100%;
  }
</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">
@section('content')
<!-- Content Header (Page header) -->
 <div class="breadcrumbs">
            <div class="col-sm-4">
                <div class="page-header float-left">
                    <div class="page-title">
                        <h1>Dashboard</h1>
                    </div>
                </div>
            </div>
            <div class="col-sm-8">
                <div class="page-header float-right">
                    <div class="page-title">
                        <ol class="breadcrumb text-right">
                            <li><a href="{{url('admin/dashboard')}}">Home</a></li>
                            <li><a href="{{url('admin/items/list')}}">Items</a></li>
                            <li class="active">All</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 
       @if (session('error'))
         <div class="col-sm-12">
        <div class="alert  alert-danger alert-dismissible fade show" role="alert">
                    <span class="badge badge-pill badge-danger">Error</span> {{session('error')}}
                    <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">
                        <div class="card">
                            <div class="card-header">
                                   <!--<strong class="card-title">Recently Scanned</strong>-->
                                   <div class="col-lg-4">
                                      <strong class="card-title">{{$pageTitle}}</strong>
                                   </div>
                                   <div class="col-lg-8">
                                      <a style="float:right;margin:5px;"  href="" class="btn btn-primary" data-toggle="modal" data-url=""  data-id="" data-target="#delete-all-items" title="Delete">Delete All Items</a>
                                      <a style="float:right;margin:5px;" href=""  data-toggle="modal" data-url=""  data-id="" data-target="#export-items" title="Delete" class="btn btn-primary">Export Items</a>
                                      <a style="float:right;margin:5px;" href="{{url('admin/items/add')}}" type="button" class="btn btn-primary"><i class="fa fa-plus"></i> Add New</a>
                                   </div>
                                </div>
                             <div class="card-body pos_rel">
                            <!-- <div class="to_form_div"> 
                                    <form method="POST" action="{{url('/admin/items/list')}}">
                                    {{ csrf_field() }}
                                    <meta id="ddd" name="csrf_token" content="{{ csrf_token() }}">
                                        <div class="inner serch_form_inr">
                                        <label>DB Type:</label>
                                        <select id="db_search" class="form-control" name="dbtype">
                                            <option value="all">All</option>
                                            @if(isset($Dbtype))
                                            @foreach($Dbtype as $key => $value)
                                            <option @if(isset($type)) @if($value->id == $type) selected @endif  @endif value="{{$value->id}}">{{$value->name}}</option>
                                            @endforeach
                                            @endif
                                            </select>
                                           
                                        </div> 
                                    </form> 
                                </div> -->
                               
                               <table id="example" class="display" cellspacing="0" width="100%">
                                    <thead>
                                        <tr>
                                            <th>Sr.No</th>
                                            <th>Name</th>
                                            <th>Unit Barcode</th>
                                            <!-- <th>Case Barcode</th> -->
                                            <th>Unit Cost</th>
                                            <th>Case Cost</th>
                                            <th>DBType</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <!-- <tbody class="itemdata">
                                        @php 
                                        $j=1;
                                        @endphp
                                     @foreach($itemdata as $data)  
                                        <tr>
                                            <td>{{$j}}</td>
                                           
                                            <td>
                                            
                              <a href="{{url('/admin/items/edit/'.$data->id)}}" class="btn btn-sm fa fa-pencil"  data-toggle="tooltip" title="Edit"></a>
                             <a href="{{url('admin/items/delete/'.$data->id)}}" class="btn btn-sm fa fa-trash remove-record" data-toggle="modal" data-url="{{url('admin/items/delete/'.$data->id)}}"  data-id="{{$data->id}}" data-target="#custom-width-modal" title="Delete"></a>
                                            
                                            </td>
                                        </tr>
                                        @php 
                                        $j++;
                                        @endphp
                                     @endforeach  
                                    </tbody> -->
                                    <!-- <tfoot>
                                        <tr>
                                            <th></th>
                                            <th>Name</th>
                                            <th>Unit Barcode</th>
                                            <th>Unit Cost</th>
                                            <th>Case Cost</th>
                                            <th>DBType</th>
                                            <th></th>
                                        </tr>
                                    </tfoot> -->
                                </table>
                            </div>
                        </div>
                    </div>


                </div>
            </div><!-- .animated -->
        </div><!-- .content -->

<script type="text/javascript">
jQuery(document).ready(function($) {
    $("#db_search").on('change', function() {
        var db_id = $(this).val();
        var csrf = $('meta[name="csrf_token"]').attr('content');
        if(db_id){
               $.ajax ({
                type: 'POST',
                url: "{{url('admin/items/list')}}",
                data: {'_token': csrf,dbtype: '' + db_id + ''},
                success : function(response) {
                    console.log(response);
                    $(".itemdata").html(response.html);
                    table.draw();
                    
                },error:function(e){
                alert("error");}
            });
        }
    });
});
</script>

<div id="delete-all-items"  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 method="POST" action="{{url('/admin/items/deleteAllItems')}}" class="remove-record-model">
             {{ csrf_field() }}
               <div class="modal-content">
                  <div class="modal-header">
                     <div>Delete All Items</div>
                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                  </div>
                    <div class="modal-body">
                        <div class="inner serch_form_inr">
                            <label>Select DB Type:</label>
                            <select id="deleteAll" class="form-control" name="dbtype">
                                <option value="">Select DB Type</option>
                                @if(isset($Dbtype))
                                @foreach($Dbtype as $key => $value)
                                <option @if(isset($type)) @if($value->id == $type) selected @endif  @endif value="{{$value->id}}">{{$value->name}}</option>
                                @endforeach
                                @endif
                            </select>
                        </div> 
                    </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  type="submit" class="btn btn-primary">Delete All</button>
                  </div>
               </div>
            </form>
          </div>
       </div>
      <!-- Delete Model -->



<div id="export-items"  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 method="POST" action="{{url('/admin/items/downloadExcel')}}" class="remove-record-model">
             {{ csrf_field() }}
               <div class="modal-content">
                  <div class="modal-header">
                     <div>Export Items</div>
                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                  </div>
                    <div class="modal-body">
                        <div class="inner serch_form_inr">
                            <label>Select DB Type:</label>
                            <select id="deleteAll" class="form-control" name="dbtype" required="required">
                                <option value="">Select DB Type</option>
                                @if(isset($Dbtype))
                                <option value="all">All</option>
                                @foreach($Dbtype as $key => $value)
                                <option @if(isset($type)) @if($value->id == $type) selected @endif  @endif value="{{$value->id}}">{{$value->name}}</option>
                                @endforeach
                                @endif
                            </select>
                        </div> 
                    </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  type="submit" class="btn btn-primary">Export</button>
                  </div>
               </div>
            </form>
          </div>
       </div>
      <!-- Delete Model -->    
 
<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>
$(document).ready(function() {
 
    $('#example thead th').each( function () {
        var title = $(this).text();
        $(this).html( '<input class="form-control" type="text" placeholder="'+title+'" />' );
    } );

    var table = $('#example').DataTable( {
        "scrollX":true,
        "ajax": "{{url('admin/items/ajaxList')}}"

    } );
    table.columns().every( function () {
        var that = this;
        $( 'input', this.header() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that.search( this.value ).draw();
            }
        } );
    } );

} );

</script>

@endsection