@extends('layouts.storeapp')

@section('content')

{{-- Products --}}

<x-flash/>
<div class="card mb-4">
    <div class="card-header">
        <div class="d-flex">
            <div class="mr-auto p-2 align-self-center"><h4>Products</h4></div>
            <div class="mr-auto p-2 align-self-center"><h6>Total: <span>{{$total}}</span></h6></div>
            <!-- <div class="mr-auto p-2 align-self-center"><h6>No Items: <span id="itemcount">{{$total}}</span></h6></div>  -->
            {{-- <div class="p-2">
                <div class="input-group">
                    <input type="text" style=" background-color: #ffff !important" id="productsearch"  name="search" class="form-control bg-light border-0 small" placeholder="Search products..." aria-label="Search" aria-describedby="basic-addon2">
                    <div class="input-group-append">
                    <button class="btn btn-primary" type="button">
                        <i class="fas fa-search fa-sm"></i>
                    </button>
                    </div>
                </div>
            </div> --}}
            @if($ProductGroups)
            <div class="p-2">
                <select class="form-control form-control-sm" id="searchproducts" name="groupID">            
                <option value="all">All</option>
                @foreach($ProductGroups as $item)
                <option value="{{$item->id}}">{{$item->title}}</option>
                @endforeach
                </select> 
            </div>
            @endif            
            <div class="p-2">
            <button class="btn btn-primary" type="submit">Ok</button>
            </div>
            <div class="p-2">
            <a class="btn btn-primary" href="{{ route('Product.create') }}"><i class="fa fa-plus"></i> ADD New</a>
            </div>           
        </div>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <!--th>SLNO.</th-->
                        <th>Product</th>
                        <th>Image</th>
                        <th>Status</th>                     
                        <th colspan="2">Actions</th>
                    </tr>
                </thead>
                <tbody id="products_tbl">
                    @foreach($Products as $Product)
                    <tr>
                        <td>{{$Product->title}}</td>
                        <td><img style="width:100px; height:100px;" src="{{asset('storage/images/products/'.$Product->image)}}" alt="Product Image"></td>  
                        <td>@if($Product->is_active == 1) active @else not active @endif</td>
                        <td><a href="{{route('Product.edit',$Product->id)}}" class="btn btn-secondary"><i class="fa fa-edit"></i> Edit</a></td>   
                        
                       <td><form method="POST" action="{{route('Product.destroy',$Product->id)}}" Id="form-delete-{{$Product->id}}">
                            @csrf
                            @method('delete')
                            <button type="button" class="btn btn-danger"  onclick="
                            event.preventDefault();
                            if(confirm('Are you sure delete this'))
                            {
                                document.getElementById('form-delete-{{$Product->id}}').submit();
                            }"><i class="fas fa-trash"></i> Delete</button></form>
                        </td>                     
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    <div class="card-footer">
       {{-- <div class="d-flex justify-content-end font-weight-bold"><h5>Total:  {{$Products->Count()}}</h5></div> --}}
         <div class="d-flex justify-content-end font-weight-bold"><h5> {{ $Products->links() }}</h5></div>
    </div>
</div>


<script>

function myFunction(){
  var id = document.getElementById('searchproducts').value;
  $.ajax({
        url: '{{ route('searchproducts') }}',
        method: "get",
        data: {_token: '{{ csrf_token() }}',grpID:id},
                    success: function (response){
                    // alert(response);
                     document.getElementById('products_tbl').innerHTML=response;
                     totalitems();
                    
                        }
                });    
}

function totalitems(){
    var table = document.getElementById("products_tbl");
    var totalRowCount = table.rows.length;
    document.getElementById('itemcount').innerHTML=totalRowCount;

}

function searchproducts(){

    var items = document.getElementById("productsearch").value;
    $.ajax({
        url: '{{ route('searchProducts') }}',
        method: "get",
        data: {_token: '{{ csrf_token() }}',searchitems:items },
                    success: function (response){
                    // alert(response);
                     document.getElementById('products_tbl').innerHTML=response;                    
                    // window.location.reload();
                    
                        }
                });   

}

</script>

@endsection