@extends('layouts.main') 
@section('title', 'Products')
@section('content')

	<div class="container-fluid">
    	<div class="page-header">
            <div class="row align-items-end">
                <div class="col-lg-8">
                    <div class="page-header-title">
                        <i class="ik ik-headphones bg-green"></i>
                        <div class="d-inline">
                            <h5>Products LIST </h5>
                            <span>View, delete and update products</span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <nav class="breadcrumb-container" aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">
                                <a href="/dashboard"><i class="ik ik-home"></i></a>
                            </li>
                            <li class="breadcrumb-item">
                                <a href="#">Products</a>
                            </li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
        <div class="row">
            <!-- list layout 1 start -->
            <div class="col-md-12">
				<div class="card">
		            <div class="card-header row">

		                <div class="col col-sm-6">
		                    <div class="card-search with-adv-search dropdown">
<!--		                        <form action="">
		                            <input type="text" class="form-control global_filter" id="global_filter" placeholder="Search.." required="">
		                            <button type="submit" class="btn btn-icon"><i class="ik ik-search"></i></button>
		                            <button type="button" id="adv_wrap_toggler_1" class="adv-btn ik ik-chevron-down dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
		                            <div class="adv-search-wrap dropdown-menu dropdown-menu-right" aria-labelledby="adv_wrap_toggler_1">
		                                <div class="row">
		                                    <div class="col-md-12">
		                                        <div class="form-group">
		                                            <input type="text" class="form-control column_filter" id="col0_filter" placeholder="Title" data-column="0">
		                                        </div>
		                                    </div>
		                                </div>
		                                <button class="btn btn-theme">Search</button>
		                            </div>
		                        </form> --->
		                    </div>
		                </div>
		                <div class="col col-sm-5">
							{{ $products->links() }}
		                </div>
		            </div>
		            <div class="card-body">
		                <table id="advanced_table" class="table">
		                    <thead>
		                        <tr>
		                            <th class="nosort" width="10">
		                                <label class="custom-control custom-checkbox m-0">
		                                    <input type="checkbox" class="custom-control-input" id="selectall" name="" value="option2">
		                                    <span class="custom-control-label">&nbsp;</span>
		                                </label>
		                            </th>
		                            <th class="nosort">Image</th>
		                            <th>Title</th>
		                            <th>SKU</th>
		                            <th>Stock</th>
		                            <th>Buy Price</th>
		                            <th>Sell Price</th>
		                      
		                            <th>Action</th>
		                        </tr>
		                    </thead>
		                    <tbody>
							@foreach ($products as $item)
								
		                    	<tr>
		                    		<td>
		                    			<label class="custom-control custom-checkbox">
		                    				<input type="checkbox" class="custom-control-input select_all_child" id="" name="" value="option2">
		                    				<span class="custom-control-label">&nbsp;</span>
		                    			</label>
		                    		</td>
		                    		<td>
										@if ($item->images)	
										@foreach (json_decode($item->images) as $image)
													<img src="../uploads/products/{{ $image  }}"  class="table-user-thumb" alt="">
										@endforeach
										@endif
									
		                    			
		                    		</td>
		                    		<td>{{ $item->name  }}</td>
		                    		<td>{{ $item->sku  }}</td>
		                    		<td>
										{{ $item->stock }}										
		                    		</td>
		                    		<td>{{ $item->buypricecurrency  }} {{ $item->buyprice  }}</td>
		                    		<td>{{ $item->sellpricecurrency  }}  {{ $item->sellprice  }}</td>

		                    		<td>
		                    			<a href="#productView" class="prodcutview" data-id="{{ $item->id }}" data-toggle="modal" data-target="#productView"><i class="ik ik-eye f-16 mr-15"></i></a>
		                    			<a href="{{ route('products.edit', $item->id)}}"><i class="ik ik-edit f-16 mr-15 text-green"></i></a>
		                    			<a href="#!"><i class="ik ik-trash-2 f-16 text-red"></i></a>
		                    		</td>
		                    	</tr>
		                    
								@endforeach		

		                    </tbody>
		                </table>
		            </div>
		        </div>
		    </div>
		    <!-- list layout 1 end -->
		    <div class="col-md-12"><hr></div>
		    <!-- list layout 2 -->
		
            <!-- list layout 2 end -->
		</div>
	</div>
	<div class="modal fade edit-layout-modal pr-0" id="productView" tabindex="-1" role="dialog" aria-labelledby="productViewLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="productViewLabel"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            </div>
            <div class="modal-body">
                <div class="row"  id="productdata">

                </div>
                        
            </div>
        </div>
    </div>

	@push('script')                
        <script src="{{ asset('plugins/amcharts/amcharts.js') }}"></script>
        <script src="{{ asset('plugins/amcharts/gauge.js') }}"></script>
        <script src="{{ asset('plugins/amcharts/serial.js') }}"></script>
        <script src="{{ asset('plugins/amcharts/themes/light.js') }}"></script>
        <script src="{{ asset('plugins/amcharts/animate.min.js') }}"></script>
        <script src="{{ asset('plugins/amcharts/pie.js') }}"></script>
        <script src="{{ asset('plugins/ammap3/ammap/ammap.js') }}"></script>
        <script src="{{ asset('plugins/ammap3/ammap/maps/js/usaLow.js') }}"></script>
        <script src="{{ asset('js/product.js') }}"></script>
    @endpush
@endsection