{{-- mainLayouts extends --}}
@extends('layouts.contentLayoutMaster')

{{-- Page title --}}
@section('title', 'Order List')

@section('vendor-style')
<link rel="stylesheet" type="text/css" href="{{asset('vendors/select2/select2.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/select2/select2-materialize.css')}}">
@endsection

{{-- page style --}}
@section('page-style')
<link rel="stylesheet" type="text/css" href="{{asset('css/pages/form-select2.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('css/pages/page-users.css')}}">
@endsection

@section('content')
<section class="users-list-wrapper section">
    <div class="users-list-table">

		<div class="card">
			<div class="row pl-1 pr-4 pt-2">
                <h5 class="col s6"><b>Complain Orders</b></h5>

                <div class="col s3"></div>
                <div class="col s3">
					<form id="filterForm" action="{{ route('admin.order.complains.filter') }}" method="get" >
                        <span>Status</span>
                        <select name="status" id="filterSelect">
                            <option value="rejected" {{ request()->status == 'rejected' ? 'selected':'' }}>Pending</option>
                            <option value="resolved" {{ request()->status == 'resolved' ? 'selected':'' }}>Resolved</option>
                            <option value="all" {{ request()->status == 'all' ? 'selected':'' }}>All</option>
                        </select>
					</form>

				</div>
            </div>
			<div class="card-content pt-0">
				<!-- datatable start -->
				<div class="responsive-table">
					<div class="center">
						{{ $orders->withQueryString()->links() }}
					</div>
					<table id="users-list-datatable" class="table responsive-table striped">
						<thead class="grey lighten-2">
							<tr>
								<th></th>
								<th>#</th>
								<th>Merchant Name</th>
								<th>City</th>
                                <th>Township</th>
                                <th>Address</th>
								<th>Total Price</th>
								<th>Payment Method</th>
								<th>Created</th>
								<th>Order Status</th>
								<th></th>
							</tr>
						</thead>
						<tbody id="append-data">
							@forelse ($orders as $key => $order)
							<tr>
								<td></td>
								<td class="order-no">{{ $order->display_order_number ?? $key + $orders->firstItem() }}</td>
								<td>
									@if ($order->user && $order->user->name)
                                        <a href="{{ route('admin.merchant.show.tab', [$order->user->id, 'merchant-order']) }}">{{ $order->user->name }}</a>
                                    @else
                                        -
                                    @endif
								</td>
								<td>{{$order->address->city->name ?? null}}</td>
								<td>{{$order->address->township->name ?? null}}</td>
								<td>{{$order->address->address}}</td>
								<td>{{$order->total_price}}</td>
								<td>{{$order->payment_method}}</td>
								<td>{{$order->created_time}}</td>
								<td class="pt-0">
									<span class="chip {{
                                        $order->status == 'pending' ? 'orange' : ( $order->status == 'reject' ? 'red' : ( $order->status == 'delivering' ? 'purple' : ( $order->status == 'delivered' ? 'blue': 'green')))
                                        }}
									lighten-4">
										<span class="{{
											$order->status == 'pending' ? 'orange-text' : ($order->status == 'reject' ? 'red-text' : ( $order->status == 'delivering' ? 'purple-text' : ( $order->status == 'delivered' ? 'blue-text': 'green-text')))
										}}">{{ $order->status }}</span>
									</span>
								</td>
								<td class="pt-0" style="{{ $order->qr_code_link ? 'width: 140px':'' }}">
									<div class="display-flex align-items-center mb-5">
                                        <i class="material-icons mt-2">
                                            <a class="blue lighten-4 border-radius-button" href="{{ route('admin.merchant.order.show', $order->id) }}" style="padding: 6px 10px;">remove_red_eye</a>
                                        </i>
                                        @if ($order->qr_code_link !=null)
                                        <form action="{{ route('admin.order.download-qr-code',$order->id) }}" method="GET" class="ml-5">
                                            <input type="hidden" name="file" value="{{ $order->qr_code_link }}">
                                            <button type="submit" class="btn btn-small red white-text btn-rounded-border" style="padding:0 0.5em;font-size: 12px"><i class="material-icons">arrow_downward</i>Qr Code</button>
                                        </form>
                                        @endif
                                    </div>
								</td>
							</tr>
							@empty
								<tr>
									<td colspan="9">No Order Found!</td>
								</tr>
							@endforelse
						</tbody>
					</table>
					<div class="center">
						{{ $orders->withQueryString()->links() }}
                    </div>
				</div>

			</div>
        </div>
    </div>
  </section>
@endsection

@section('vendor-script')
<script src="{{asset('vendors/select2/select2.full.min.js')}}"></script>
@endsection

@section('page-script')
<script src="{{asset('js/scripts/form-select2.js')}}"></script>
<script>
    $(document).ready(function(){
        $(document).on('change','#filterSelect',function()
        {
            let status = $('#filterSelect').val();

            if(status)
            {
                $('#filterForm').submit();
            }
        })
	});




</script>
@endsection