@extends('admin.layouts.app')
@section('content')

<div class="nk-block-head nk-block-head-sm">
    <div class="nk-block-between">
        <div class="nk-block-head-content">
            <h3 class="nk-block-title page-title">Products</h3>
        </div><!-- .nk-block-head-content -->
        <div class="nk-block-head-content">
            <div class="toggle-wrap nk-block-tools-toggle">
                <a href="#" class="btn btn-icon btn-trigger toggle-expand mr-n1" data-target="pageMenu"><em class="icon ni ni-more-v"></em></a>
                <div class="toggle-expand-content" data-content="pageMenu">
                    <ul class="nk-block-tools g-3">
                        <li>
                            <div class="form-control-wrap">
                                {{-- <div class="form-icon form-icon-right">
                                    <em class="icon ni ni-search"></em>
                                </div> --}}
                                {{-- <input type="text" class="form-control" id="default-04" placeholder="Quick search by id"> --}}
                            </div>
                        </li>
                        <li>
                            {{-- <div class="drodown">
                                <a href="#" class="dropdown-toggle dropdown-indicator btn btn-outline-light btn-white" data-toggle="dropdown">Status</a>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <ul class="link-list-opt no-bdr">
                                        <li><a href="#"><span>New Items</span></a></li>
                                        <li><a href="#"><span>Featured</span></a></li>
                                        <li><a href="#"><span>Out of Stock</span></a></li>
                                    </ul>
                                </div>
                            </div> --}}
                        </li>
                        <li class="nk-block-tools-opt">
                            <a href="#" data-target="addProduct" class="toggle btn btn-icon btn-primary d-md-none"><em class="icon ni ni-plus"></em></a>
                            <a href="{{ url('admin/product/create') }}" data-target="addProduct" class="btn btn-primary d-none d-md-inline-flex"><em class="icon ni ni-plus"></em><span>Add Product</span></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div><!-- .nk-block-head-content -->
    </div><!-- .nk-block-between -->
</div><!-- .nk-block-head -->
<div class="nk-block">
    <div class="nk-tb-list is-separate mb-3">

        <div class="nk-tb-item nk-tb-head">
            <div class="nk-tb-col nk-tb-col-check">
                <div class="custom-control custom-control-sm custom-checkbox notext">
                    <input type="checkbox" class="custom-control-input" id="uid">
                    <label class="custom-control-label" for="uid"></label>
                </div>
            </div>
            <div class="nk-tb-col tb-col-sm"><span>Name</span></div>
            <!-- <div class="nk-tb-col"><span>SKU</span></div> -->
            <div class="nk-tb-col"><span>Price</span></div>
            <div class="nk-tb-col"><span>Stock</span></div>
            <!--<div class="nk-tb-col tb-col-md"><span>Category</span></div>-->
            <!--<div class="nk-tb-col tb-col-md"><span>Sub Category</span></div>-->
            <div class="nk-tb-col tb-col-md">
                <!-- <em class="tb-asterisk icon ni ni-star-round"></em> -->
            </div>
            <div class="nk-tb-col nk-tb-col-tools">
                <!-- <ul class="nk-tb-actions gx-1 my-n1">
                    <li class="mr-n1">
                        <div class="dropdown">
                            <a href="#" class="dropdown-toggle btn btn-icon btn-trigger" data-toggle="dropdown"><em class="icon ni ni-more-h"></em></a>
                            <div class="dropdown-menu dropdown-menu-right">
                                <ul class="link-list-opt no-bdr">
                                    <li><a href="#"><em class="icon ni ni-edit"></em><span>Edit Selected</span></a></li>
                                    <li><a href="#"><em class="icon ni ni-trash"></em><span>Remove Selected</span></a></li>
                                    <li><a href="#"><em class="icon ni ni-bar-c"></em><span>Update Stock</span></a></li>
                                    <li><a href="#"><em class="icon ni ni-invest"></em><span>Update Price</span></a></li>
                                </ul>
                            </div>
                        </div>
                    </li>
                </ul> -->
            </div>
        </div><!-- .nk-tb-item -->


        @if($products)
        @foreach($products as $product)
            <div class="nk-tb-item">
                <div class="nk-tb-col nk-tb-col-check">
                    <div class="custom-control custom-control-sm custom-checkbox notext">
                        <input type="checkbox" class="custom-control-input" id="uid1">
                        <label class="custom-control-label" for="uid1"></label>
                    </div>
                </div>
                <div class="nk-tb-col tb-col-sm">
                    <span class="tb-product">
                        <img src="{{asset('assets/admin/product/'.$product->product_image)}}" alt="" class="thumb">
                        <span class="title">{{ ucfirst($product->product_name) }}</span>
                    </span>
                </div>
                
                <!-- <div class="nk-tb-col">
                    <span class="tb-sub">{{$product->product_sku}}</span>
                </div> -->

                <div class="nk-tb-col">
                    <span class="tb-lead">${{$product->product_price}}</span>
                </div>

                <div class="nk-tb-col">
                    <span class="tb-sub">{{ $product->product_quantity }}</span>
                </div>
               
                <div class="nk-tb-col tb-col-md">
                    <div class="asterisk tb-asterisk">
                        <!-- <a href="#"><em class="asterisk-off icon ni ni-star"></em><em class="asterisk-on icon ni ni-star-fill"></em></a> -->
                    </div>
                </div>
                <div class="nk-tb-col nk-tb-col-tools">
                    <ul class="nk-tb-actions gx-1 my-n1">
                        <li class="mr-n1">
                            <div class="dropdown">
                                <a href="#" class="dropdown-toggle btn btn-icon btn-trigger" data-toggle="dropdown"><em class="icon ni ni-more-h"></em></a>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <ul class="link-list-opt no-bdr">
                                        <li><a href="{{ route('product.edit',$product->id) }}"><em class="icon ni ni-edit"></em><span>Edit Product</span></a></li>
                                        {{-- <li><a href="#"><em class="icon ni ni-eye"></em><span>View Product</span></a></li>
                                        <li><a href="#"><em class="icon ni ni-activity-round"></em><span>Product Orders</span></a></li>
                                        <li><a href="#"><em class="icon ni ni-trash"></em><span>Remove Product</span></a></li> --}}
                                    </ul>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div><!-- .nk-tb-item -->
        @endforeach
        @endif    

        
       
    </div><!-- .nk-tb-list -->
    {{-- <div class="card">
        <div class="card-inner">
            <div class="nk-block-between-md g-3">
                <div class="g">
                    <ul class="pagination justify-content-center justify-content-md-start">
                        <li class="page-item"><a class="page-link" href="#"><em class="icon ni ni-chevrons-left"></em></a></li>
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><span class="page-link"><em class="icon ni ni-more-h"></em></span></li>
                        <li class="page-item"><a class="page-link" href="#">6</a></li>
                        <li class="page-item"><a class="page-link" href="#">7</a></li>
                        <li class="page-item"><a class="page-link" href="#"><em class="icon ni ni-chevrons-right"></em></a></li>
                    </ul><!-- .pagination -->
                </div>
                <div class="g">
                    <div class="pagination-goto d-flex justify-content-center justify-content-md-start gx-3">
                        <div>Page</div>
                        <div>
                            <select class="form-select form-select-sm" data-search="on" data-dropdown="xs center">
                                <option value="page-1">1</option>
                                <option value="page-2">2</option>
                                <option value="page-4">4</option>
                                <option value="page-5">5</option>
                                <option value="page-6">6</option>
                                <option value="page-7">7</option>
                                <option value="page-8">8</option>
                                <option value="page-9">9</option>
                                <option value="page-10">10</option>
                                <option value="page-11">11</option>
                                <option value="page-12">12</option>
                                <option value="page-13">13</option>
                                <option value="page-14">14</option>
                                <option value="page-15">15</option>
                                <option value="page-16">16</option>
                                <option value="page-17">17</option>
                                <option value="page-18">18</option>
                                <option value="page-19">19</option>
                                <option value="page-20">20</option>
                            </select>
                        </div>
                        <div>OF 102</div>
                    </div>
                </div><!-- .pagination-goto -->
            </div><!-- .nk-block-between -->
        </div>
    </div> --}}
</div><!-- .nk-block -->



@endsection