@extends('backend.layout')

@section('content')

<div class="row">
	<div class="col-md-12">
		<div class="panel panel-flat">
			<div class="panel-heading" style="padding-top: 5px; padding-bottom: 5px;">
				<h3 class="content-group text-semibold mt-10 mb-10" >
					Thông tin đại lý : <b>{{$item->fullname }}</b>
				</h3>
				<div class="heading-elements">
					<ul class="icons-list">
                		<li style="margin-right: 15px;"><a href="{{route('backend.web_agen.list')}}"><i class="icon-arrow-left7"></i>Danh sách</a></li>
                		<li><a href="{{route('backend.web_agen.edit',$item->id)}}"><i class="icon-pencil"></i></a></li>
                	</ul>
            	</div>
			</div>

			<div class="panel-body">
				<div class="tabbable">
					<a href="#" class="visible-xs"><i class="icon-arrow-left7"></i>Danh sách</a>
					@include('backend.web.agency.nav')
					<div class="tab-content">
                        <div class="tab-pane {{ $action == 'account' ? 'active' : null }}" id="top-tab4">
                            <div class="panel panel-flat">
                                <div class="panel-body">
									<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ên</th>
													<th>Email</th>
						                            <th>Ngày mở</th>
													<th>Ngày kích hoạt</th>
													<th>Gói sử dụng</th>
													<th>Hạn sử dụng</th>
													<th>Trạng thái</th>
													<th>Website</th>
												</tr>
											</thead>
											<tbody>
						                       	@foreach($accounts as $account)
						                       		<tr>
						                       			<td>{{ $loop->index + 1 }}</td>
						                       			<td>{{ $account->fullname }}</td>
														<td>{{ $account->email }}</td>
														<td>{{ $account->created_at }}</td>
														@if ($account->is_active==1)
															<td>{{$account->active_at}}</td>
														@else
															<td>Chưa kích hoạt</td>
														@endif
														<td>{{@$account->active_service->service->name}}</td>
														<td>
															@if(isset($account->active_service->started_at))
															<li>{{ @$account->active_service->started_at->format('Y-m-d') }} <b>to</b> {{ @$account->active_service->expiration_at->format('Y-m-d') }}</li>
															@endif
														</td>
														<td>
															@if($account->status == 1)
																<a href="javascript:void(0);" data-action="pause" data-id="{{ $account->id }}" data-name="{{$account->email}}"  class="label label-success active-package">Hoạt động</a>
															@else
																<span class="label label-in label-default active-package" data-id="{{ $account->id }}" data-name="{{$account->email}}"  data-action="active">Dừng</span>
															@endif
														</td>
														<td>{{$account->type}}</td>
						                       		</tr>
						                       	@endforeach
											</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>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

@endsection

@push('styles')
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">
	<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>
	<style type="text/css">
		.swiper-container {
            width: 100%;
            height: 100%;
        }
        .gallery-top {
        	overflow: hidden;
            height: 80%;
            width: 100%;
        }
        .gallery-thumbs {
            height: 20%;
            box-sizing: border-box;
            padding: 10px 0;
        }
        .swiper-thumbs img{
        	max-height: 100px !important;	
        }
        .swiper-slide img{width: 100%;max-height: 350px; object-fit: contain;}
        .gallery-thumbs .swiper-slide {
            width: 25%;
            height: 100%;
            opacity: 0.4;
        }
        .gallery-thumbs .swiper-slide-thumb-active {
            opacity: 1;
        }

		.nav-tabs.nav-tabs-top>li.active>a, .nav-tabs.nav-tabs-top>li.active>a:focus, .nav-tabs.nav-tabs-top>li.active>a:hover{
			    background-color: #0acde68c;
		}
		@media screen and (max-width: 768px){
			.label-list .navbar-right{
				position: absolute;
				top: 0px;
				right: -10px;
			}
		}
		.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;
		}
		.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{
			cursor: pointer;
		}
		@media (max-width: 768px) {
			.panel-body{
                padding: 0px;
            }
		    .nav-tabs:before {
		    	display: none;
		    }
		    .nav-tabs>li{
		    	float: left;
		    }
		    .nav-tabs{
		    	padding: 0px;
		    }
		}
	</style>
@endpush

@push('scripts')
	<script src="{{ URL::asset('backend/global_assets/js/plugins/forms/styling/switchery.min.js')}}"></script>
	<script src="{{ URL::asset('backend/global_assets/js/plugins/forms/selects/select2.min.js')}}"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
	<script type="text/javascript">
    	$(document).ready(function() {
				$('.select2').select2();
		});
		document.addEventListener('DOMContentLoaded', function () {
	        var galleryThumbs = new Swiper('.gallery-thumbs', {
	            spaceBetween: 5,
	            slidesPerView: 4,
	            freeMode: true,
	            loop: true,
	            watchSlidesVisibility: true,
	            watchSlidesProgress: true,
	            autoplay: {
				    delay: 5000, 
				    disableOnInteraction: false, 
				},
	        });
	        var galleryTop = new Swiper('.gallery-top', {
	            spaceBetween: 5,
	            navigation: {
	                nextEl: '.swiper-button-next',
	                prevEl: '.swiper-button-prev',
	            },
	            thumbs: {
	                swiper: galleryThumbs
	            },autoplay: {
			        delay: 5000, // Thời gian chờ giữa các lần chuyển slide (đơn vị là mili giây)
			        disableOnInteraction: false, // Tắt chế độ tự động chuyển slide khi người dùng tương tác với slider
			    },
	        });
	    });
		$(document).ready(function() {
		    $('.thumb').magnificPopup({
			  	delegate: 'a',
			  	type: 'image',
			  	gallery: {
	                enabled: true,
	                navigateByImgClick: true, // Enable navigation when clicking on image
	                preload: [0,1], // Preload previous and next images for smoother navigation
	                arrowMarkup: '<button title="%title%" type="button" class="mfp-arrow mfp-arrow-%dir%"></button>',
	                tPrev: 'Previous', // Text for previous button
	                tNext: 'Next', // Text for next button
	            },
			});
		});

		function reply(value, comment, user_name) {
            if (document.getElementById("reply-input").value !== null) {
                document.getElementById("reply-input").value = value;
                document.getElementById("comment").innerText = comment;
                document.getElementById("user-name").innerText = user_name;
                document.getElementById("reply-info").style.display = "block";
				document.getElementById("reply-info").style.display = "block";
				document.getElementById("input-comment").scrollIntoView({ behavior: 'smooth' });
            }
        }
	</script>

@endpush