@extends('backend.layout')

@section('content')

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

			<div class="navbar navbar-default navbar-xs fillter padding-0" style="">
				<form action="" method="GET">
					<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">Bộ lọc <i class="icon-circle-down2"></i></a>
							<a href="{{ route('backend.web_acc.list') }}" 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">
						
						<ul class="nav navbar-nav">
							<li>
								<input class="form-control" name="keyword" placeholder="ID hoặc Email.." value="{{ @$_GET['keyword'] }}"  autocomplete="off">
							</li>

							<li>
								<select name="website" id="website" style="margin-top: 3px;" class="form-control select-size-xs select2"  data-allow-clear="true" data-placeholder="Website">
									<option value="">Website</option>
									<option value="jp" @if( isset($_GET['website']) &&  $_GET['website'] == "jp" ) selected @endif>itvjp.com</option>
									<option value="kr" @if( isset($_GET['website']) &&  $_GET['website'] == "kr" ) selected @endif>kr.itvjp.com</option>
									<option value="vn" @if( isset($_GET['website']) &&  $_GET['website'] == "vn" ) selected @endif>vn.itvjp.com</option>
								</select> 
							</li>

							<li>
								<select name="status" style="margin-top: 3px;" class="form-control select-size-xs select2"  data-allow-clear="true" data-placeholder="Trạng thái">
									<option value="">Trạng thái</option>
									<option value="1" @if( isset($_GET['status']) &&  $_GET['status'] == "1" ) selected @endif>Đã thanh toán</option>
									<option value="2" @if( isset($_GET['status']) &&  $_GET['status'] == "2" ) selected @endif>Đã huỷ</option>
								</select> 
							</li>

							<li>
								<select name="service_id" id="service" style="margin-top: 3px;min-width: 200px;" class="form-control select-size-xs select2" data-placeholder="Dịch vụ đang dùng" data-allow-clear="true">
									<option value="">Tất cả</option>
									@foreach($groups as $group)
									<optgroup label="{{ $group->name }}">
										@foreach($group->services as $service)
										<option value="{{ $service->id }}" @if(@$_GET['service_id'] == $service->id) selected="selected"  @endif>{{ $service->name }}</option>
										@endforeach
									</optgroup>
									@endforeach
								</select>
							</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_acc.list') }}" ><i class="icon-cancel-circle2 position-left"></i></a>
						</div>
						
					</div>
				</form>
			</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>Tài khoản</th>
							<th>Dịch vụ</th>
							<th>Đăng ký ngày</th>
							<th>Website</th>
                            <th>Thông tin</th>
                            <th>Trạng thái</th>
						</tr>
					</thead>
					<tbody>
                        @if($accounts != null)
						@foreach($accounts as $stt => $account)
						<tr>
							<td class="text-center">{{ ($accounts->currentPage() - 1)*$accounts->perPage() + $stt + 1  }}</td>
							<td>{{ @$account->account->fullname }}</td>
							<td>{{ @$account->service->name }}</td>
                            <td>{{ $account->created_at->format('Y-m-d') }}</td>
                            <td>{{ $account->type }}</td>
                            <td>
                            	Giá dv: {{ $account->type == 'vi' ? $account->service->vi_uds : $account->service->usd }} $
                            </td>
                            <td>
                                @if($account->status == 'active')
									<a href="javascript:void(0);" data-action="pause" data-id="{{ $account->id }}" data-name="{{$account->email}}"  class="label label-success active-package">Đã thanh toán</a>
                                @else
                                    <span class="label label-in label-default active-package" data-id="{{ $account->id }}" data-name="{{$account->email}}"  data-action="active">Đã huỷ</span>
                                @endif
	                            
							</td>
                            <td class="text-center" style="white-space: nowrap !important;">
                                <ul class="icons-list">
                                    <!-- <li style="margin-right:10px;"><a href="{{ route('backend.web_acc.edit',$account->id) }}" class="text-blue"><i class="icon-key"></i></a></li> 
                                    @if( \Auth::user()->isAbleTo('account-delete') )
                                    <li><a onclick="return confirm('Bạn có chắc chắn muốn xoá tài khoản: {{ $account->email }}?');" style="color:red;" href="{{ route('backend.web_acc.remove',$account->id) }}"><i class="icon-trash"></i></a></li>
                                    @endif -->
                                </ul>
                            </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;">
					{{ $accounts->appends(@$_GET)->links() }}	
				</div>
			</div>
		</div>
	</div>

	
	<div class="modal fade" id="serviceModal" tabindex="-1" role="dialog" aria-labelledby="serviceModalLabel" aria-hidden="true">
		<div class="modal-dialog" role="document">
		  <div class="modal-content">
			<div class="modal-header">
			  <h5 class="modal-title" id="serviceModalLabel">Gia hạn dịch vụ người dùng</h5>
			  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
				<span aria-hidden="true">&times;</span>
			  </button>
			</div>
			<div class="modal-body">
				<form action="{{route('backend.web_acc.extend')}}" method="POST">
					{{ csrf_field() }}
					<fieldset class="content-group">
						<div class="row">
							<div class="col-12 col-md-6">
								<input type="hidden" id="serviceIdInput" name="id_account_service">
								<div class="form-group has-feedback">
									<label class="control-label text-semibold">Email người dùng</label>
									<p id="accountName"></p> 
								</div>
							</div>
							<div class="col-12 col-md-6">
								<div class="form-group has-feedback">
									<label class="control-label text-semibold">Dịch vụ người dùng</label>
									<p id="serviceName"></p> 
								</div>
							</div>
						</div>
						<div class="form-group has-feedback">
							<label class="control-label text-semibold">Ngày hết hạn</label>
							<input class="form-control custom-input datepicker" id="serviceExpirationDateInput" type="text" name="expiration_at" autocomplete="off">
						</div>
					</fieldset>
	
					<div class="text-right">
						<button type="submit" class="btn btn-primary">Gia hạn<i class="icon-file-plus position-right"></i></button>
					</div>
				</form>
		  	</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() {
			$('.datepicker').datepicker({
				dateFormat: 'yy-mm-dd', 
				minDate: new Date(),
				showButtonPanel: true,
				yearRange: '1900:2050'			
			});
		});

		$('.select2').select2();
    </script>
@endpush