@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="search_status">
                                <label>DB Type:</label>
                                <select class="form-control" id='searchByStatus'>
                                  <option value=''>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>
                              <table id="users" class="table table-hover table-condensed" style="width:100%">
                                  <thead>
                                      <tr>
                                         <tr>
                                            <th>Sr.No</th>
                                            <th>Name</th>
                                            <th>Unit Barcode</th>
                                            <th>Case Barcode</th>
                                            <th>Alternate Barcode1</th>
                                            <th>Alternate Barcode2</th>
                                            <th>Unit Cost</th>
                                            <th>Case Cost</th>
                                            <th>DBType</th>
                                            <th>Actions</th>
                                        </tr>
                                      </tr>
                                  </thead>
                              </table>
                               
                               
                            </div>
                        </div>
                    </div>


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


<!-- .Delete item model box -->
<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>
<!-- .End Delete item model box -->

<!-- Export item model box -->

<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="export-Excel" class="form-control export-Excel" name="dbtype" required="required">
                                <option value="" class="selectdb">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>
    <!-- Export item model box -->  
 
<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 type="text/javascript">
$(".modal").on("hidden.bs.modal", function() {
    $(".selectdb").html("Select DB Type");
  });
$(document).ready(function() {
  var DataTable ;
    DataTable = $('#users').DataTable({
        "processing": true,
        "serverSide": true,
        "scrollX": true,
        "ajax": {
                'url':'{{ url('/admin/item/dataTablelists') }}',
                'data' : function(data){
                  var datatype = $('#searchByStatus').val();
                  data.datatype = datatype;
                }
            },
        "columns": [
            {data: 'rownum', name: 'rownum' ,searchable: false},
            {data: 'name', name: 'name'},
            {data: 'unitbarcode', name: 'unitbarcode'},
            {data: 'casebarcode', name: 'casebarcode'},
            {data: 'altbarcode1', name: 'altbarcode1'},
            {data: 'altbarcode2', name: 'altbarcode2'},
            {data: 'unitcost', name: 'unitcost'},
            {data: 'casecost', name: 'casecost'},
            {data: 'dbtype', name: 'type'},
            {data: 'action', name: 'action'}
        ]
    });

    $('#searchByStatus').change(function(){
      DataTable.draw();
    });
});
</script>



@endsection