@extends('admin.layouts.master')

@section('page-title') عرض كوبونات الخصم المنتهية @endsection
@push('main-copouns-active') m-menu__item--active @endpush

@section('content')
<div class="row">
	<div class="col-md-12">
		<!--begin::Portlet-->
		<div class="m-portlet m-portlet--tab">
			<div class="m-portlet__head">
				<div class="m-portlet__head-caption">
					<div class="m-portlet__head-title">
						<span class="m-portlet__head-icon">
							<i class="fa fa-percent"></i>
						</span>
						<h3 class="m-portlet__head-text">
							<span> ادارة كوبونات الخصم المنتهية </span>
						</h3>
					</div>
				</div>
				<div class="m-portlet__head-tools">
					<ul class="nav nav-pills nav-pills--brand m-nav-pills--align-right m-nav-pills--btn-pill m-nav-pills--btn-sm" role="tablist">
						<li class="nav-item m-tabs__item">
							<a href="{{ route('admin.copouns.index') }}" class="btn btn-success m-btn m-btn--icon">
								<span>
									<i class="fa flaticon-reply"></i>
									<span>العودة للكوبونات الفعالة</span>
								</span>
							</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="m-portlet__body">
				<table class="table table-striped- table-bordered table-hover table-checkable m-table m-table--head-bg-primary table-sm" id="m_table_1">
					<thead>
						<tr>
							<th class="text-center"> <b>#</b> </th>
							<th class="text-center"> <b>كود الكوبون</b> </th>
							<th class="text-center"> <b>نسبة الخصم</b> </th>
							<th class="text-center"> <b>تاريخ الانتهاء</b> </th>
							<th class="text-center"> <b>المستخدمين المستفيدين</b> </th>
							<th class="text-center"><b><i class="flaticon-cogwheel-2"></i></b></th>
						</tr>
					</thead>
					<tbody>
						@foreach($copouns as $single_copoun)
						<tr class="odd gradeX">
							<td class="text-center">
								{{ $loop->index + 1 }}
							</td>

							<td class="text-center">
								{{ $single_copoun->copoun_code }}
							</td>

							<td class="text-center">
								{{ $single_copoun->amount }}%
							</td>

							<td class="text-center">
								{{ $single_copoun->expires_at }}
							</td>

							<td class="text-center">
								{{ ($single_copoun->target_users == 'single')? 'مجموعة محددة' : 'الكل' }}
							</td>

							<td class="text-center">
								<a href="javascript:;" title="عرض التفاصيل" class="m-portlet__nav-link btn m-btn m-btn--hover-primary m-btn--icon m-btn--icon-only m-btn--pill view-details-btn" data-id="{{ $single_copoun->id }}" data-toggle="modal">
									<i class="la la-eye"></i>
								</a>
								@if ($single_copoun->copoun_users()->count())
								<a href="{{ route('admin.copouns.edit', ['copoun' => $single_copoun->id]) }}" title="عرض المستفيدين" class="m-portlet__nav-link btn m-btn m-btn--hover-primary m-btn--icon m-btn--icon-only m-btn--pill view-users-btn" data-target="#view-users" data-id="{{ $single_copoun->id }}" data-toggle="modal">
									<i class="la la-users"></i>
								</a>
								@endif
							</td>
						</tr>
						@endforeach
					</tbody>
				</table>
				<div class="modal fade" id="view-users" tabindex="-1" role="dialog" aria-labelledby="Advanced" aria-hidden="true">
					<div class="modal-dialog modal-lg" role="document">
						<div class="modal-content">
							<div class="modal-header">
								<h5 class="modal-title">عرض مستخدمي الكوبون</h5>
								<button type="button" class="close" data-dismiss="modal" aria-label="Close">
									<span aria-hidden="true">&times;</span>
								</button>
							</div>
							<div class="modal-body">
								<div class="m-portlet__body m-portlet__body--no-padding">

									<!-- USERS BEGIN -->
									<table class="table table-striped- table-bordered table-hover table-checkable m-table m-table--head-bg-primary">
										<thead>
											<tr>
												<th class="text-center"> <b> # </b> </th>
												<th class="text-center"> <b> اسم المستخدم </b> </th>
												<th class="text-center"> <b> رقم الجوال </b> </th>
												<th class="text-center"> <b> هل استخدم الكود </b> </th>
											</tr>
										</thead>
										<tbody id="users-body">
										</tbody>
									</table>
									<!-- USERS END -->
								</div>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-secondary" data-dismiss="modal">
									<span>اغلاق</span>
								</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="show-div"></div>
@stop

@push('page_level_script')
	<script src="{{ URL::asset('/assets/admin/datatables.js') }}"></script>
	<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
	<script type="text/javascript">
		$(".view-users-btn").click (function () {
			$("#users-body").empty();

			$.ajax({
				type: "GET",
				url: admin_url + "/copouns/copoun_users/" + $(this).data('id'),
				success: function(data){
					console.log(data);
					var counter = 0;
					$.each(data, function(key, user){
						$("#users-body").append('<tr class="odd gradeX">'
													+'<td class="text-center">' + ++counter + '</td>'
													+'<td class="text-center">' + user.name + '</td>'
													+'<td class="text-center">0' + user.phone + '</td>'
													+'<td class="text-center">' + (user.pivot.use_count? 'نعم' : 'لا') + '</td>'
												+'</tr>');
					});
				}
			});
		});

		$(document).on('click', '.view-details-btn',function(event) {
			event.preventDefault();
			$('.show-div').html('');

			$.ajax({
				type: "GET",
				url: admin_url + "/copouns/show",
				data: {
					id: $(this).data('id')
				},
				success: function(data){
					if (data.status) {
						$('.show-div').html(data.data);
					} else {
						swal('', data.message, 'error');
					}
				},
				complete: function (data, textStatus, errorThrown) {
					if (textStatus == 'success') {
						if (data.responseJSON.status) {
							$('#view-details').modal('show');
							console.log(11);
						}
					}
				},
				error: function (jqXHR, textStatus, errorThrown) {
					swal('حدث خطأ غير متوقع', 'يرجى اعادة المحاولة, في حال تكرار الخطأ يرجى تحديث الصفحة', 'error');
				}
			});
		});
	</script>
@endpush