@extends('admin.base')

@section('title', 'account management')

@section('account_content')
	<div class="ui grid">
		<div class="sixteen wide column">
			<div class ="content">
				<div class="ui center aligned basic segment">
					<div class="ui left icon action input">
						<div class="ui horizontal divider"><h3>{{ __('Order List') }}</h3>
						</div>
					</div>
				</div>
				<div class="content_top">
					<div class="ui form">
						<div class="fields">
							<div class="labelfield">{{ __('Order No') }}</div>
							<div class="inputfield">
							<select class="ui search dropdown" id="orderIDFilter" name="orderIDFilter">
								<option value="All">All</option>
								@foreach($orderNo as $key=> $value)
									<option value="{{$value->orderNo}}">{{$value->orderNo}}</option>
								@endforeach
							</select>
							</div>
						</div>

						<div class="fields">
							<div class="labelfield">{{ __('Client Phone No') }}</div>
							<div class="inputfield">
							<select class="ui search dropdown" id="phoneFilter" name="phoneFilter">
								<option value="All">All</option>
								@foreach($phones as $key=> $value)
									<option value="{{$value->customerPhone}}">{{$value->customerPhone}}</option>
								@endforeach

							</select>
							</div>
						</div>
						<div class="fields">
							<div class="labelfield">{{ __('Date From') }}</div>
							<div class="inputfield">
								<div class="ui icon input" id="fromDateBlock" >
									<input type="text" placeholder="Date" id="fromDate" >
									<i class="calendar icon"></i>
								</div>
							</div>
						</div>
						<div class="fields">
							<div class="labelfield">To</div>
							<div class="inputfield">
								<div class="ui icon input" id="toDateBlock">
									<input type="text" placeholder="Date" id="toDate">
									<i class="calendar icon"></i>
								</div>
							</div>
						</div>
						<div class="fields">
							<button class="ui button with7Margin" onclick="clearCalendar()">{{ __('Clear Calendar') }}</button>
							<button class="ui button with7Margin" onclick="clearFilters()">{{ __('Clear All Filters') }}</button>
						</div>
					</div>

					@hasrole('super user')
						<div class="ui form">
							<div class="fields">
								<button class="ui button with7Margin" onclick="searchFilter(undefined,true)">{{ __('Export Table') }}</button>
							</div>
						</div>
					@endhasrole

                    <div class="table" id="toExcelTableContainer">
                        <table class="ui celled table" id="toExcelTable" hidden>

                        </table>
                    </div>

					<div class="table" id="tableContainer">
                        @include('admin.order.order_list_filter')
					</div>
				</div>
			</div>
		</div>
	</div>
	@include('admin.export_custom_button')
	<script>
		$(function(){
            $('#orders, #order').addClass('active');
        });

        function searchFilter(listPage,isExport) {
			var data = {
				'_token':"{{ csrf_token() }}"
			};

			data['status'] = $('#paymentFilter').val();
			data['phone'] = $('#phoneFilter').val();
			data['orderNo'] = $('#orderIDFilter').val();
			data['code'] = $('#codeFilter').val();
			data['dateFrom'] = $('#fromDate').val();
			data['dateTo'] = $('#toDate').val();
			if(!isExport)
			    data['isFilter'] = true;
			data['listPage'] = listPage;
			data['isExport']=  isExport;

			$.ajax({
				type:'GET',
				url:"{{route('adminOrderList')}}",
				data:data,
				success:function(data){
					if(isExport){
                        $('#toExcelTable').html(data);
                        exportTable('toExcelTable');
                        $('#toExcelTable').html('');
                    }else
                        $('#tableContainer').html(data);
				}
			});
		}

		function clearCalendar() {
			$('#toDateBlock').calendar('clear');
			$('#fromDateBlock').calendar('clear');
			searchFilter();
		}
		function clearFilters() {
			window.location.href = window.location.href;
			//location.reload();
		}

		$("#paymentFilter").change(function(){
			searchFilter();
		});
		$("#orderIDFilter").change(function(){
			searchFilter();
		});
		$("#phoneFilter").change(function(){
			searchFilter();
		});
		$("#codeFilter").change(function(){
			searchFilter();
		});

		$('#fromDateBlock').calendar({
			type: 'date',
			today:true,

			onHide: function () {
				searchFilter();
			}

		});

		$('#toDateBlock').calendar({
			type: 'date',
			today:true,
			onHide: function () {
				searchFilter();
			}
		});
	</script>
@endsection

@section('breadcrumbs')
	<a href="{{route('admin-landing')}}">Backend Management</a><i class="right angle icon divider"></i><span>Orders List</span>
@endsection