@extends('layouts.app')

@section('content')
<div class="card">
	<div class="card-header">
		<h5 class="card-title">Orders</h5>

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

	<div class="card-body">		
		<div id="collapse-filter" class="collapse">
			<form class="form-filter mb-3" action="{{ route('orders.index') }}" method="GET">
				<div class="grid gap-3 xlarge-4">
					<!-- <div>
						<label>Payment Status</label>
						<select class="form-control" name="payment_status">
							<option value="" selected>All</option>
							<option value="0">Pending</option>
							<option value="1">Paid</option>
							<option value="2">Canceled</option>
							<option value="-1">Failed</option>
						</select>					
					</div>

					<div>
						<label>Shipping Status</label>
						<select class="form-control" name="shipping_status">
							<option value="" selected>All</option>
							<option value="0">Pending</option>
							<option value="1">Being Prepared</option>
							<option value="2">Being Shipped</option>
							<option value="3">Shipped</option>
							<option value="4">Canceled</option>
						</select>					
					</div> -->
					
					<div>
						<label>Sort</label>
						<select class="form-control" name="sort">
							<option value="id">Order ID</option>
							<option value="created_at" selected>Created At</option>
						</select>
					</div>

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

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

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

@section('js')
<script>

</script>
@endsection