@extends('layouts.app-admin')
@section('content')
<link rel="stylesheet" href="{{url('adminAssets/assets/libs/select2/select2.css')}}">
<style>
    div#example_filter,div#example_paginate{
        display: inline-block;
    float: right;
    padding-right: 15px;
    }
    .dt-buttons,div#example_info {
    display: inline-block;
    padding-left: 15px;
}
div.dataTables_wrapper div.dataTables_filter input {
    margin-left: 0.5em;
    display: inline-block;
    width: auto;
    border: none;
    border-bottom: 1px solid rgb(24 28 33 / 8%);
}
a.paginate_button.current {
  
    border-color: #ff4a00 !important;
    background-color: #ff4a00 !important;
    color: #fff !important;
    padding: .295rem .5rem;
    min-width: calc(1.5rem + 46px);
    font-size: .75rem;
    line-height: 1;
}

a.paginate_button {
    margin: 0 7px;   
    color: #111 !important;
    padding: .295rem .5rem;
    min-width: calc(1.5rem + 46px);
    font-size: .75rem;
    line-height: 1;
}
a.paginate_button.previous,a.paginate_button.next {
    margin: 0;   
    padding: 0;
}
a.disabled {
    color: #cacaca !important;
}
button.dt-button.buttons-excel.buttons-html5 {
    font-weight: 500;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: #eceff7;
    border: 0 solid transparent;
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    line-height: 1.47;
}
   .default-style .select2-container--default .select2-selection--single{
       border-radius: 4px;
    /* border: 0 solid rgba(24, 28, 33, 0.1); */
    /* border-bottom: 1px solid #e7e8e8; */
    padding-left: 8px;
   }
   select.form-control , input.form-control {
    border-radius: 4px !important;
    border: 1px solid #e7e8e8 !important;
    margin-bottom: 20px;
    padding-left: 8px;
}
input.form-control::placeholder{
    padding-left: 8px;
}

    .default-style .select2-container--default .select2-selection--single .select2-selection__rendered{
    padding-left:0px;
    }ul.report {padding-left: 0;
    list-style: none;
}ul.report li {
    margin-right: 13px;
    display: inline-block;
}</style>
<!-- [ content ] Start -->
<div class="container-fluid flex-grow-1 container-p-y">
    <h4 class="font-weight-bold py-3 mb-0">Manage Inventory</h4>
    <div class="text-muted small mt-0 mb-4 d-block breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}"><i class="feather icon-home"></i></a></li>
            <li class="breadcrumb-item">Products</li>
            <li class="breadcrumb-item active">Manage Inventory</li>
        </ol>
    </div>

       <div class="card">
        <h6 class="card-header bg-dark text-white">Manage Inventory</h6>
             
        <div class="card-datatable table-responsive">
            <table id="example" class="datatables-demo table table-striped table-bordered">
                <thead>
                    <tr>
                        <th>Sr. No.</th>
                        <th>Product Code</th>                     
                        <th>Title</th>                       
                        <th>Price</th>    
                        <th>Stock</th>                       
                        <th>Stock Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($product as $key=>$row)
                    <tr class="odd gradeX">
                        <td>{{$key+1}}</td>
                        <td>{{$row->sku}}</td> 
                      
                        <td>{{$row->title}}</td>   
                        <td>£{{$row->price}}</td>     
                        <td>{{@$row->stock}}</td>                       
                                    
                          <td>  @if($row->stock!='0')                          
                        <span class="badge badge-success">Stock Availability</span>
                        @else                      
                        <span class="badge badge-danger">Out Of Stock</span>
                        @endif
                        </td>
                        <td>
                            <a href="{{url('admin/inventory-edit/'.$row->id)}}" class="btn btn-info btn-xs"><i class="feather icon-edit"></i> </a> 
                        </td>
                    </tr>
                    @endforeach
                    
                </tbody>
            </table>
        </div>
    </div>
 
</div>
<!-- [ content ] End -->
@endsection


@section('script')

<script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>

<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>
<!-- <script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.flash.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.print.min.js"></script>

<script src="{{asset('adminAssets/assets/libs/bootstrap-select/bootstrap-select.js')}}"></script>
  <script src="{{asset('adminAssets/assets/libs/bootstrap-multiselect/bootstrap-multiselect.js')}}"></script>
  <script src="{{asset('adminAssets/assets/libs/select2/select2.js')}}"></script>


  <script type="text/javascript">

$(document).ready(function() {  
  $('#example').DataTable({

    dom: 'Bfrtip',
    "buttons": [
      'excel'
    ]
  });

});


</script>
@endsection