@extends('layouts.app')

@section('content')
<div class="text-right mb-3">
	
</div>

<div class="card">
	<div class="card-header">
		<h5 class="card-title">Products</h5>

		<div>
			<button type="button" class="btn btn-dark" data-toggle="collapse" data-target="#collapse-filter">
				<i class="fas fa-sliders-h"></i> Filter
			</button>

			<a href="{{ route('products.create') }}" class="btn btn-outline-dark">
				<i class="fas fa-plus"></i> New
			</a>
		</div>
	</div>

	<div class="card-body">		
		<div id="collapse-filter" class="collapse">
			<form class="form-filter mb-3" action="{{ route('products.index') }}" method="GET">
				<div class="grid gap-3 xlarge-4">
					<div>
						<label>Filter</label>
						<select class="form-control" name="filter">
							<option value="" selected>All</option>
							<option value="new_arrival">New Arrival</option>
							<option value="best_seller">Best Seller</option>
						</select>
					</div>

					<div>
						<label>Sort</label>
						<select class="form-control" name="sort">
							<option value="spu" selected>SPU</option>
							<option value="unit_price">Unit Price</option>
						</select>
					</div>

					<div>
						<label>Order</label>
						<select class="form-control" name="order">
							<option value="ASC" selected>Ascending</option>
							<option value="DESC">Descending</option>
						</select>
					</div>

					<div>
						<label>Search</label>
						<div class="input-group">
							<input type="search" class="form-control" name="keyword" placeholder="Keyword (spu, name, category)">

							<div class="input-group-append">
								<button type="submit" class="btn btn-dark"><i class="fas fa-search"></i></button>
							</div>
						</div>						
					</div>
				</div>

				<input type="hidden" name="page" value="1"> 
			</form>
		</div>

		<div class="data">
			@include('partials.products')
		</div>
	</div>
</div>
@endsection