@extends('backend.layouts.layout-2')

@section('page-title', trans('app.matchRequsts'))
@section('page-heading', trans('app.matchRequsts'))

@section('styles')
	@parent
	<link rel="stylesheet" href="{{ mix('/vendor/libs/datatables/datatables.css') }}">
@endsection


@section('content')

	<div class="container-lg match-request">
		<!-- Nav tabs -->
		<ul id="myTab" class="nav nav-tabs" role="tablist">
			<li role="presentation" class="active mx-2"><a class="btn btn-primary active" href="#pending" aria-controls="pending"
					role="tab" data-toggle="tab">تحت المراجعة</a></li>
			<li role="presentation" class="mx-2"><a class="btn btn-success" href="#approved" aria-controls="approved"
					role="tab" data-toggle="tab">تم الموافقة</a>
			</li>
			<li role="presentation" class="mx-2"><a class="btn btn-warning" href="#cancelled" aria-controls="cancelled"
					role="tab" data-toggle="tab">تم الالغاء</a></li>
		</ul>
	</div>


	<div class="card">

		<div class="card-datatable table-responsive">
			<div class="row">
				<div class="col-sm-12">
					<div class="panel panel-default">
						<div class="panel-body">
							<div role="tabpanel">
								<!-- Tab panes -->
								<div class="tab-content">
									<div role="tabpanel" class="tab-pane active" id="pending">

										<table class="table table-striped table-bordered" id="pending_table" data-status="0">
											<thead>
												<tr>
													<th>#</th>
													<th>@lang('app.uniqueId1')</th>
													<th>@lang('app.uniqueId2')</th>
													<th>@lang('app.status')</th>
													<th>@lang('app.updated_by')</th>
													<th>@lang('app.created_at')</th>
													<th>@lang('app.updated_at')</th>
													<th>@lang('app.action')</th>
												</tr>
											</thead>
										</table>
									</div>
									<div role="tabpanel" class="tab-pane" id="approved">
										<table class="table table-striped table-bordered" id="approved_table" data-status="1">
											<thead>
												<tr>
													<th>#</th>
													<th>@lang('app.uniqueId1')</th>
													<th>@lang('app.uniqueId2')</th>
													<th>@lang('app.status')</th>
													<th>@lang('app.updated_by')</th>
													<th>@lang('app.created_at')</th>
													<th>@lang('app.updated_at')</th>
													<th>@lang('app.action')</th>
												</tr>
											</thead>
										</table>

									</div>
									<div role="tabpanel" class="tab-pane" id="cancelled">
										<table class="table table-striped table-bordered" id="cancelled_table" data-status="2">
											<thead>
												<tr>
													<th>#</th>
													<th>@lang('app.uniqueId1')</th>
													<th>@lang('app.uniqueId2')</th>
													<th>@lang('app.status')</th>
													<th>@lang('app.updated_by')</th>
													<th>@lang('app.created_at')</th>
													<th>@lang('app.updated_at')</th>
													<th>@lang('app.action')</th>
												</tr>
											</thead>
										</table>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

		</div>
	</div>
@stop



@section('scripts')
	@parent
	<!-- Dependencies -->
	<script src="{{ mix('/vendor/libs/datatables/datatables.js') }}"></script>
	<script type="text/javascript">
		$(document).ready(function() {

			var tables = ["pending_table", "approved_table", "cancelled_table"];
			tables.forEach(function(table_id) {
				$('#' + table_id).DataTable({
					"lengthMenu": [
						[10, 25, 50, -1],
						[10, 25, 50, "All"]
					],
					processing: true,
					serverSide: true,
					responsive: true,
					ajax: '{!! route('matchRequests.getDatatable') !!}?status=' + $('#' + table_id).data('status'),
					columns: [{
							data: 'id',
							orderable: false,
							searchable: false
						},
						{
							data: 'r_unique',
							name: 'r_unique'
						},
						{
							data: 'p_unique',
							name: 'p_unique'
						},
						{
							data: 'status',
							name: 'status',
							"render": function(data, type, row) {

								if (row.status === 1) {
									return 'تم الموافقة';
								} else if (row.status === 2) {
									return 'تم الالغاء';
								} else {
									return 'تحت المراجعة';
								}
							}
						},
						{
							data: 'updated_by',
							name: 'updated_by',
							orderable: false,
						},
						{
							data: 'created_at',
							name: 'created_at',
							orderable: false,
						},
						{
							data: 'updated_at',
							name: 'updated_at',
							orderable: false,
						},
						{
							data: 'action',
							name: 'action',
							orderable: false,
							searchable: false
						}
					]
				});
			});

		});
	</script>
	@include('backend.partials.deleteMode', ['routeName' => 'matchRequests.destroy'])
@endsection