@extends('backend.layout')

@section('content')

<div class="row">
	<div class="col-md-12">
		<p style="margin: 0px; padding: 5px 0px;"><span class="text-semibold">{{ ($account_services->currentPage() - 1)*10 + 1 }}-{{ ($account_services->currentPage() - 1)*10 + $account_services->count() }}</span> trong <span class="text-semibold">{{ $account_services->total() }}</span> bản ghi.</p>
		<div class="panel panel-flat">

			<div class="navbar navbar-default navbar-xs fillter padding-0" style="">
				<ul class="nav navbar-nav no-border visible-xs-block">
					<li>
						<a style="float: left;" class="text-left collapsed" data-toggle="collapse" data-target="#navbar-filter"><i class="icon-more"></i></a>
						
						<a style="float: right;" class="btn text-right" data-popup="tooltip" title="" ><i class="icon-plus3 position-left"></i></a>
						<a style="float: right;" class="color-black btn" data-popup="tooltip" title="Huỷ lọc" ><i class="icon-cancel-circle2 position-left"></i></a>
						<button style="float: right;" data-popup="tooltip" title="Lọc" type="submit" class="btn btn-sucess text-right"><i class="icon-search4 position-left"></i></button>
					</li>
				</ul>

				<div class="navbar-collapse collapse" id="navbar-filter">
					<form action="" method="GET">
						<ul class="nav navbar-nav">
							<li>
								<input class="form-control" name="keyword" placeholder="Họ và tên" value="{{ @$_GET['keyword'] }}"  autocomplete="off">
							</li>
						</ul>

						<div class="navbar-right hidden-xs">
                            <button data-popup="tooltip" title="Lọc" type="submit" class="btn btn-sucess"><i class="icon-search4 position-left"></i></button>
                            <a class="color-black btn" data-popup="tooltip" title="Huỷ lọc" href="{{ route('backend.web_block.list') }}" ><i class="icon-cancel-circle2 position-left"></i></a>
                            <a  class="text-blue" data-toggle="modal" data-target="#serviceModal" data-account-name="{{ @$account_service->account->email }}" data-service-id="{{ @$account_service->id }}" data-service-name="{{ @$account_service->service->name }}" data-started-at="{{ @$account_service->started_at ? $account_service->started_at->format('Y-m-d') : '' }}" data-expiration-date="{{ @$account_service->expiration_at ? $account_service->expiration_at->format('Y-m-d') : '' }}"><i class="icon-rotate-cw position-left"></i></a>
						</div>
					</form>
				</div>
			</div>
			
			<div class="clearfix"></div>
			<div class="table-responsive" style="min-height:400px;">
				<table class="table table-bordered table-striped">
					<thead>
						<tr>
							<th  class="text-center" width="20">STT</th>
                            <th>Dịch vụ</th>
							<th>Ngày bắt đầu</th>
                            <th>Ngày hết hạn</th>
                            <th>Thời gian đăng ký</th>
						</tr>
					</thead>
					<tbody>
                        @if($account_services != null)
						@foreach($account_services as $stt => $account_service)
						<tr>
							<td class="text-center">{{ ($account_services->currentPage() - 1)*$account_services->perPage() + $stt + 1  }}</td>
                            <td>
                                {{ $account_service->service->name  }}
                            </td>
                            <td>
                               {{ @$account_service->started_at ? $account_service->started_at->format('Y-m-d') : '' }}
                            </td>
                            <td>
                                {{ @$account_service->expiration_at ? $account_service->expiration_at->format('Y-m-d') : '' }}
                            </td>
                            <td>
                                {{ @$account_service->created_at }}
                            </td>
						</tr>
						@endforeach
						@endif
					</tbody>
				</table>
				<div class="clear-fix" style="border-top:1px solid #ccc;"></div>
				<div style="padding:10px 15px;text-align:center;">
					{{ $account_services->appends(@$_GET)->links() }}	
				</div>
			</div>
		</div>
	</div>

	<div id="serviceModal" class="modal" data-backdrop="false">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
					<h5 class="modal-title">Gia hạn dịch vụ: <b>{{ $account->email }}</b></h5>
				</div>

				<div class="modal-body">
					<div class="clearfix"></div>
					<div class="form-group has-feedback @if( @$errors->first('service_id') != null ) has-error  @endif ">
						<label class="control-label col-lg-3 text-semibold">Chọn dịch vụ</label>
						<div class="col-lg-9">
							<select name="service_id" class="form-control select2"   id="service" data-placeholder="Chọn dịch vụ">
								<option value="">Chọn dịch vụ</option>
								@foreach($services as $groups)
								<optgroup label="{{ $groups['name'] }}">
									@foreach($groups['val'] as $ser)
									<option value="{{ $ser->id }}" group="{{ $groups['name'] }}" dayused="{{$ser->using_day}}">{{ $ser->name }}</option>
									@endforeach
								</optgroup>
								@endforeach
							</select>
							<div class="form-control-feedback">
								@if( @$errors->first('service_id') != null )<i class="icon-notification2"></i> @endif
							</div>
							<span class="help-block">{{ @$errors->first('service_id') }}</span>
						</div>
					</div>

					<div class="clearfix"></div>
					<div class="form-group has-feedback">
						<label class="control-label col-lg-3 text-semibold">Ngày hết hạn mới</label>
						<div class="col-lg-9">
							<input type="date" class="form-control date" id="expired_date" placeholder="Y-m-d" name="" value="{{ old('expired_date',@$expired_date)}}">
							<div class="form-control-feedback">
								@if( @$errors->first('expired_date') != null )<i class="icon-notification2"></i> @endif
							</div>
							<span class="help-block">{{ @$errors->first('expired_date') }}</span>
						</div>
					</div>
					<div class="clearfix"></div>
					<div class="form-group has-feedback">
						<label class="control-label col-lg-3 text-semibold">Website active</label>
						<div class="col-lg-9">
							<input type="text" class="form-control" name="type" id="type" placeholder="Nhập vào website">
							<div class="form-control-feedback">
								@if( @$errors->first('expired_date') != null )<i class="icon-notification2"></i> @endif
							</div>
							<span class="help-block">{{ @$errors->first('expired_date') }}</span>
						</div>
					</div>
					
				</div>

				<div class="modal-footer">
					<button type="button" class="btn btn-link" data-dismiss="modal">Huỷ</button>
					<button type="button" class="btn btn-primary" id="add">Gia hạn</button>
				</div>
			</div>
		</div>
	</div>

</div>
<div class="modal fade" id="logModal" tabindex="-1" role="dialog" aria-labelledby="logModalLabel" aria-hidden="true">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="logModalLabel">Hoạt động đăng nhập</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<!-- Nội dung của modal -->
			</div>
		</div>
	</div>
</div>
	<!-- /invoice grid options -->
@endsection

@push('styles')
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
	<style>
		.pnotify-center {
		   right: calc(50% - 150px) !important;
		   top: calc(50% - 150px) !important;
		}
		.select-xs.select2-selection--single{
			height:36px;
		}
		.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{
			padding: 5px 5px;
			white-space: normal !important;
		}
		.select-xs.select2-selection--multiple .select2-search--inline .select2-search__field{
			min-width:200px;
		}
		.select2-selection--multiple .select2-search--inline .select2-search__field{
			padding:5px 0px !important;
			max-width: 200px;
		}
		.modal-header .close {
		    position: absolute;
		    right: 10px;
		    top: 9px;
		    margin-top: 0;
		}
		.modal.right .modal-dialog {
		  position: fixed;
		  margin: auto;
		  min-width: 350px; /* Điều chỉnh độ rộng của modal phù hợp với yêu cầu của bạn */
		  height: 100%;
		  top: 45%;
		  right: -370px; /* Khoảng cách từ phía bên phải màn hình */
		  transition: right 0.3s ease-in-out;
		}

		.modal.right.in .modal-dialog {
		  right: 0;
		}
	</style>
@endpush

@push('scripts')
	<script src="{{ URL::asset('backend/global_assets/js/plugins/forms/selects/select2.min.js')}}"></script>
	<script src="{{ URL::asset('backend/global_assets/js/plugins/forms/styling/switchery.min.js')}}"></script>
	<script src="{{ URL::asset('backend/global_assets/js/plugins/ui/jquery-ui.js')}}"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
	<script>
		$(document).ready(function() {
			$('.select2').select2();

			$('.datepicker').datepicker({
				dateFormat: 'yy-mm-dd', 
				minDate: new Date(),
				showButtonPanel: true,
				yearRange: '1900:2050'			
			});
		});

		$('#add').click(function() {
			var service_id = $('#service').val();
			var expired_date = $('#expired_date').val();
			var type = $('#type').val();
			if(service_id == "" || expired_date.trim() == "" || type == ""){
				alert('Vui lòng chọn nhập đủ thông tin');
			}else {
				$("#serviceModal .modal-content").LoadingOverlay('show');
				var url 	= "{{ route('backend.web_acc.reNew', $account->id)}}";
				var data 	=  { _token: _token, expired_date : expired_date, service_id: service_id, type: type};
				$.post(url, data, function(result){
                	location.reload();
                });
			}

		});
		
    </script>
@endpush