@extends('backend.layout')

@section('content')

<div class="row">
	<div class="col-md-12">
		<p style="margin: 0px; padding: 5px 0px;"><span class="text-semibold">{{ ($agencies->currentPage() - 1)*10 + 1 }}-{{ ($agencies->currentPage() - 1)*10 + $agencies->count() }}</span> trong <span class="text-semibold">{{ $agencies->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="btn text-primary" data-popup="tooltip" title="Thêm mới đại lý website" href="{{ route('backend.web_agen.add') }}" ><i class="icon-plus3 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>Họ và tên</th>
							<th>Email</th>
                            <th>Số điện thoại</th>
                            <th>Địa chỉ</th>
                            <th>Tổng tài khoản</th>
                            <th>Tài khoản sd</th>
							<th>Số dư</th>
							<th>Người mở</th>
                            <th>Trạng thái</th>
							<th  class="text-center">Action</th>
						</tr>
					</thead>
					<tbody>
                        @if($agencies != null)
						@foreach($agencies as $stt => $agency)
						<tr>
							<td class="text-center">{{ ($agencies->currentPage() - 1)*$agencies->perPage() + $stt + 1  }}</td>
							<td>
								<a href="{{route('backend.web_agen.item',['id'=>$agency->id, 'action' => 'index'])}}">
									{{ $agency->fullname }}
								</a>
							</td>
                            <td>
                                {{ $agency->email  }}
                            <td>{{ $agency->phone }}</td>
                            <td>
								{{ $agency->address }}
							</td>
                            <td>{{ $agency->ref }}</td>
							<td>
								@if ($agency->balance)
									$ {{ $agency->balance }}
								@endif
							</td>
							<td></td>
							<td>
								{{@$agency->user->user_name}}
							</td>
                            <td>
                                @if($agency ->status == 1)
									<a href="javascript:void(0);" data-action="pause" data-id="{{ $agency->id }}" data-name="{{$agency->email}}"  class="label label-success active-package">Hoạt động</a>
                                @else
                                    <span class="label label-in label-default active-package" data-id="{{ $agency->id }}" data-name="{{$agency->email}}"  data-action="active">Dừng</span>
                                @endif
							</td>
                            <td class="text-center">
                                <ul class="icons-list">
                                    <li style="margin-right:10px;"><a href="{{ route('backend.web_agen.edit',$agency->id) }}" class="text-blue"><i class="icon-pencil7"></i></a></li> 
                                </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;">
					{{ $agencies->appends(@$_GET)->links() }}	
				</div>
			</div>
		</div>
	</div>
</div>
@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'			
			});
		});
        //----------------------------------------------
		// var _token 	= $('meta[name="csrf-token"]').attr('block');
		
		// ---------------
		var url = "{{ route('backend.web_agen.status') }}";
		$('.active-package').on('click', function() {
			var id 		= $(this).attr('data-id');
			// var _token 	= $('meta[name="csrf-token"]').attr('block'); 
			var status  = $(this).attr('data-action');
			var name 	= $(this).attr('data-name');

			var title 	= 'Tắt hoạt động đại lý: '+name;
 			var elem 	= $(this);

 			// console.log(status);
 			// alert(status);
			if(status == 'true'){
				title = 'Bật hoạt động đại lý: '+name;
			}

			var notice = new PNotify({
	            title: title,
	            text: '<p>Bạn chắc chắn với thay đổi này?</p>',
	            hide: false,
	            type: 'warning',
	            addclass: 'pnotify-center',
	            confirm: {
	                confirm: true,
	                buttons: [
	                    {
	                        text: 'Cập nhật',
	                        addClass: 'btn btn-sm btn-primary'
	                    },
	                    {	
	                    	text : 'Huỷ',
	                        addClass: 'btn btn-sm btn-link'
	                    }
	                ]
	            },
	            buttons: {
	                closer: false,
	                sticker: false
	            },
	            history: {
	                history: false
	            }
	        })

	        // On confirm
	        notice.get().on('pnotify.confirm', function() {

	            var data = {id: id, _token: _token, action : status};
                $.post(url, data, function(result){
                	location.reload();
                	$('.bootbox').modal('toggle');
                	new PNotify({
			            title: 'Thông báo',
			            text: 'Cập nhật tài khoản: '+name+' thành công.',
			            icon: 'icon-checkmark3',
			            type: 'success'
			        });

                	if(result == 1){
                		elem.attr('data-action','false');
                		elem.html('Hoạt động');
                		elem.removeClass('label-default');
                		elem.addClass('label-success');
                	}else{
						elem.attr('data-action','true');
                		elem.html('Dừng');
                		elem.removeClass('label-success');
                		elem.addClass('label-default');
                	}

                });

	        })
        })

		$(document).ready(function() {
			$('#serviceModal').on('show.bs.modal', function(event) {
			var button = $(event.relatedTarget); // Phần tử <a> được click
			var accountName = button.data('account-name'); // Lấy dữ liệu từ thuộc tính data-account-name
			var serviceName = button.data('service-name'); // Lấy dữ liệu từ thuộc tính data-service-name
			var startedAt = button.data('started-at'); // Lấy dữ liệu từ thuộc tính data-started-at
			var expirationDate = button.data('expiration-date'); // Lấy dữ liệu từ thuộc tính data-expiration-date
			var serviceId = button.data('service-id'); 
			// Cập nhật thông tin trong modal
			var modal = $(this);
			modal.find('#accountName').text(accountName);
			modal.find('#serviceName').text(serviceName);
			modal.find('#serviceStartedAtInput').val(startedAt);
			modal.find('#serviceExpirationDateInput').val(expirationDate);
			modal.find('#serviceIdInput').val(serviceId);
			});
		});

	    function showModal() {
			var modal = document.getElementById("logModal");
			modal.style.display = "block";
		}
    </script>
@endpush