@extends('frontend.master_big')

@section('title', $data->seo_title . (isset($_GET['page']) ? ' | page ' . $_GET['page'] : ''))
@section('description', $data->seo_description . (isset($_GET['page']) ? ' | page ' . $_GET['page'] : ''))
@section('keywords', $data->keywords)
@section('image', asset('filemanager/data-images/' . $data->image))
@if ($data->seo_indexed == 0)
    @section('robots', 'noindex,nofollow')
@endif
@section('content')
@if (Cache::get('cache_config_ads')['banner_fixed_right_status'] == 1)
    @include('frontend.layouts.article.big_content')
@else
	@include('frontend.layouts.article.big_content')
@endif

@if(isset($article_speed))
	<style>@include('frontend.css')</style>
@endif
<style>
	#tooltip .share {
	color: #333;
	margin-left: 0;
	font-size: 14px;
}
.btn-facebook {
	color: unset;
	background-color: unset;
	border: unset;
	font-size: 19px;
	cursor: pointer;
	padding: 0 5px;
}
	.btn-twitter {
		color: unset;
	background-color: unset;
	border: unset;
	font-size: 19px;
	cursor: pointer;
	padding: 0 5px;
	}
	.btn-facebook i {
	color: #2654b1 !important;
}

.btn-twitter i {
	color: #549efd !important;
}
	.content img{max-width: 100%;}
	.content{font-size: 18px; line-height: 36px;}
	.content-of-table {
	border: 1px solid #b0b2bc;
	padding: 10px;
	margin-bottom: 50px;
	margin-top: 20px;
	border-radius: 5px; 
}
.title-table {
	font-size: 22px;
	margin-bottom: 10px;
}
.title-table i {
	margin-right: 10px;
}
.content-table {
	padding-left: 20px;
}
.item-table {
	line-height: 32px;
}
.share {
	font-weight: 600;
	color: #ffffffb0;
	margin-left: 20px;
	margin-right: 10px;
}
.social-network i {
	font-size: 20px;
	color: #656e96 !important;
	margin: 0 5px;
}
.social-facebook i { 
	font-size: 20px;
	color: #2654b1 !important;
	margin: 0 5px;
}
.social-facebook { 
	cursor: pointer;
}
.social-twitter {
	cursor: pointer;
}
.social-twitter i{
	color: #549efd !important;
	font-size: 21px;
	margin: 0 5px;
}

.fqa .title_faq{
			text-align: center;
			font-weight: 600;
			margin-bottom: 30px;
			font-size: 2rem;
		}
		.toplist-fqa {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 20px;
	font-weight: 600;
	cursor: pointer;
	
}
.toplist-fqa i {
	font-size: 22px;
}
.item-fqa {
	border-bottom: 1px solid;
	padding-bottom: 10px;
	margin-bottom: 10px;
}
.item-fqa:first-child .botlist-fqa {
	display: block;
}
.botlist-fqa {
	display: none;
	padding-left: 20px; 
	margin-top: 15px;
	font-size: 18px;
}
.content h2 {
	margin-top: 2.25rem !important;
	margin-bottom: 1.75rem !important;
	font-size: 2rem !important;
}
.content h3 {
	font-size: 1.7rem;
	margin-top: 2rem !important;
	margin-bottom: 1.5rem !important;
}
.content h4 {
	font-size: 1.5rem;
}
.content h5 {
	font-size: 1.4rem;
}
.content h6 {
	font-size: 1.3rem;
}
.content .table p{
	margin-bottom: 0;
}
.content .table td, .content .table th{
	text-align: center;
}
.content .table-bordered thead td, .content .table-bordered thead th {
	border-bottom-width: 0px;
}
.content .table thead tr:first-child,
.content .table thead .caption{
	background: #333;
	color: #fff;
}
.content .table-bordered td, .content .table-bordered th {
	border: 1px solid #ffffffb0;
}
.content .table-bordered td, .content .table-bordered th {
	border-top: 1px solid #ffffffb0 !important;
}
#tooltip.tooltip_img{
	left: 50%;
	transform: translateX(-50%);
	border: unset;
}
.intro-faqs {
    font-size: 18px;
}

iframe {
  max-width: 100%;
}

input[type="image"] {
  max-width: 100%;
  height: auto!important;
}

	#tooltip{position:absolute;visibility:hidden}.arrow_box{position:relative;background:#f2f2f2;border:1px solid #7d7d7d}.arrow_box:after,.arrow_box:before{bottom:100%;left:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none}.arrow_box:after{border-color:rgba(242,242,242,0);border-bottom-color:#f2f2f2;border-width:10px;margin-left:-10px}.arrow_box:before{border-color:rgba(110,110,110,0);border-bottom-color:#7d7d7d;border-width:11px;margin-left:-11px}#tooltip.show{padding:4px 10px;visibility:visible;margin-top:15px}#cal1{position:absolute;height:0;width:0;top:100px;left:100px;z-index:-100}#cal2{position:absolute;height:0;width:0;top:0;left:0;z-index:-100}.
</style>

<div class="main-content detail-article" id="min-height-3" data-article-id="{{$data->id}}">
	<div class="container">
		<div class="row">
			<div class="col-12 col-sm-10 offset-sm-1">
				@if(!empty($data->list_ask))
										<div class="fqa py-4">
						<div class="title_faq" >Frequently Asked Questions (FAQs)</div>
						<div class="intro-faqs pb-3">
							{!! $data->intro_faq !!}
						</div>
						<div class="list-fqa">
							@foreach($list_ask as $value)
								<div class="item-fqa">
									<div class="toplist-fqa">
										<div class="title-fqa">
											{!! $value->question !!}
										</div>
										<div class="caret-fqa">
											<i class="fas"></i>
										</div>
									</div>
									<div class="botlist-fqa">{!! $value->answer !!}</div>
								</div>
							@endforeach
						</div>
					</div> 
				@endif
				@if (!empty($data->ending))
					<div>{!! $data->ending !!}</div>
				@endif
				@if (!empty($data->list_tags))
					<div class="box-tags my-4">
						Tags
												@foreach (explode(",", $data->list_tags) as $key => $value)
							<a href="{{ route('client.show-tag-article', ['slug' => $list_slug_tags[$key]]) }}" rel="tag" target="_blank">• {{ $value }}</a>
						@endforeach
					</div>
				@endif
				<script>
					$('.item-fqa:not(:first-child) .caret-fqa i').addClass('fa-caret-down');
					$('.item-fqa:first-child .caret-fqa i').addClass('fa-caret-up');
					$('.toplist-fqa').click(function(){
						$(this).parent().children('.botlist-fqa').slideToggle(300);
						$(this).children().children('.fas').toggleClass('fa-caret-down fa-caret-up')
					});
				</script>
				<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.css">
				<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.js"></script>
				<div class="align-items-center justify-content-between d-md-flex">
					<div class="box-rate d-flex align-items-center">
						<div class="p-0 rateYo"></div>
						<div class="d-flex content ml-3">
							<span>Rating:<span class="detail-rate ml-1">{{number_format($data->rate,1)}}</span></span>
							<span class="mx-1">-</span>
							<span><span class="detail-vote mr-1">{{$data->number_rate}}</span>Votes</span>
						</div>
					</div>
					<div class="d-flex">
						 <span class="share ml-0"> Share </span> 
						 <a class="social-twitter"><i class="fab fa-twitter"></i></a> 
						 <a class="social-facebook"><i class="fab fa-facebook-f"></i></a> 
						 <a href="javascript:void(0)" class="social-network" title="{{ __('messages.share') }}"><i class="fas fa-share-alt"></i></a>
					</div>
					<script>
		                let postUrl = encodeURI(document.location.href);
						$('.social-facebook').click(function(){
		                    window.open(`https://www.facebook.com/sharer.php?u=${postUrl}`, "", "width=500,height=600"); 
		                })
		                $('.social-twitter').click(function(){
		                    window.open(`https://twitter.com/share?url=${postUrl}&text={{ $data->title }}`, "", "width=500,height=600"); 
		                })
		            </script>
				</div>
				<!-- end -->

				<!-- realted-posts -->
				@if(isset($relateds))
				<div class="mt-5 ">
					<div class="" style="position: relative;">
						<div class="title text-center mb-3" style="font-size: 2.2rem;">
							Related Posts
						</div>
						<a href="{{ url('/') }}/cat-article/{{ $data->cat_slug }}-{{ $data->cat_id }}" class="see-all-related" target="_blank">All post</a>
					</div>
					@if(count($relateds) <= 3)
					<div class="content">
						<div class="row py-3">
							@foreach($relateds as $value)
							<div class="col-md-4">
					            <div class="pb-2 pb-md-0">
					                <a href="{{ route('client.show-article', ['slug' => $value->slug, 'id' => $value->id ]) }}" title="{{ $value->title }}" class="link-default" target="_blank">
					                    <img src="/" data-src="{{ asset('filemanager/data-images/' . $value->image) }}" alt="{{ $value->title }}" class="lazy img-thumbnail w-100">
					                </a>
					            </div>
					            <div class="">
					                <h3 class="pt-2 text-center">
					                    <a href="{{ route('client.show-article', ['slug' => $value->slug, 'id' => $value->id ]) }}" title="{{ $value->title }}" class="link-default text-center" target="_blank">{{ $value->title }}
					                    </a>
					                </h3>
					            </div>
							</div>
							@endforeach
						</div>
					</div>
					@else
				    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/>
					<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
					<div class="content px-5 " style="position:relative;">
					    <div class="swiper slide-related w-100">
					        <div class="swiper-wrapper">
					            @foreach($relateds as $value)
					            <div class="swiper-slide item">
					                <div class="w-100">
					                    <a href="{{ route('client.show-article', ['slug' => $value->slug, 'id' => $value->id ]) }}" title="{{ $value->title }}" class="link-default w-100" target="_blank">
					                        <img src="/" data-src="{{ asset('filemanager/data-images/' . $value->image) }}" alt="{{ $value->title }}" class="lazy img-thumbnail w-100">
					                    </a>
					                </div>
					                <div class="">
					                    <h3 class="pt-2 text-center">
					                        <a href="{{ route('client.show-article', ['slug' => $value->slug, 'id' => $value->id ]) }}" title="{{ $value->title }}" class="link-default text-center" target="_blank">{{ $value->title }}
					                        </a>
					                    </h3>
					                </div>
					            </div>
					            @endforeach
					        </div>
					       
					    </div>
					     <div class="btn-prev-related"></div>
					     <div class="btn-next-related"></div>
					</div>
					<script type="text/javascript">
					    list_monhoc = new Swiper('.slide-related', {
			               slidesPerView: 3,
			               spaceBetween: 30,
			               loop: true,
			               autoplay: false,
			               navigation: {
			                   nextEl: ".btn-next-related",
			                   prevEl: ".btn-prev-related"
			               },
			               breakpoints: {
			                   320: {
			                       slidesPerView: 1,
			                       slidesPerGroup: 1,
			                   },
			                   768: {
			                       slidesPerView: 2,
			                       slidesPerGroup: 2,
			                       spaceBetween: 24
			                   },
			                   1200: {
			                       spaceBetween: 30
			                   }
			               }
			           });
					</script>
					<style type="text/css">
						.btn-prev-related {
							background-image: url({{ url('/') }}/frontend/images/ic_prev.svg) ;
							background-position:center;
							background-size:cover;
							width:36px;
							height:36px;
							position:absolute;
							left:0px;
							top:25%;
							cursor:pointer
						}
						.btn-next-related {
							background-image: url({{ url('/') }}/frontend/images/ic_next.svg) ;
							background-position:center;
							background-size:cover;
							width:36px;
							height:36px;
							position:absolute;
							right:0px;
							top:25%;
							cursor:pointer
						}
					</style>
					@endif
				</div>
				@endif
				<!-- end -->


				<!-- comment -->
				<section class="comment-section mt-4">
					<div class="title d-flex align-items-center justify-content-between">
						<p class="mb-0" style="font-size: 1.7rem;"><span id="total-comment">{{$totalComments}}</span> Comments</p>
						<div class="d-flex align-items-center">
							<span class="mr-2">Filter</span>
							<select class="comment-select">
								<option value="1">Newest</option>
								<option value="2">Oldest</option>
							</select>
						</div>
					</div>
					<div class="content">
	                <ol class="list-comment list-comment-0">
	                @foreach($data->commentsRoot as $com)
		                @component('comment', ['com' => $com])
		                @endcomponent
	                @endforeach
	                </ol>
					</div>
					<div class="repond repond-0 mt-4">
						<p class="title mb-0" style="font-size: 1.3rem;">
							Leave a Comment
						</p>
						<small>
							Your email address will not be published. Required fields are marked *
						</small>
						<form class="comment-form">
							<div class="fill-comment fill-comment-0">
								<textarea id="comment-0" rows="5" cols="80" maxlength="65525" class="form-control comment-0" placeholder="Comment*"></textarea>
							</div>
							<div class="fill-author fill-author-0">
								<input id="author-0" type="text" name="author" placeholder="Name*" class="form-control author author-0" >
							</div>
							<div class="fill-email fill-email-0">
								<input id="email-0" type="email" name="email" placeholder="Email*" class="form-control email email-0">
							</div>
							<div class="submit-form">
								<div class="btn btn-submit-comment" data-id="0">
									Submit Comment
								</div>
							</div>
						</form>
					</div>
					<style type="text/css">
						.see-all-related{
							position: absolute;
							right: 0;
							top: 50%;
							transform: translateY(-50%);
							font-size: 1.1rem;
						}
						.comment-section{
							color: #fff;
						}
						.comment-section> .title {
							padding: 0.5rem 0;
							border-bottom: 1px solid #fff;
						}
						.comment-section .comment-select {
							background-color: #000928;
							border: 1px solid #626F97;
							color: #626F97;
							border-radius:4px;
							padding: 2px 6px;
							font-size: 0.8rem;
							font-weight: 600;
						}
						.comment-section h3 {
							margin: 0!important;
							font-size: 1.2rem;
						}
						.comment-section ol {
							list-style-type: none;
							color: #fff;
							/*margin-top: 1.25rem;*/
							padding-left: 0;
						}
						.comment-section ol.list-comment>li {
							border-bottom:1px solid #fff ;
							padding: 1rem 0;
						}
						.comment-section ol .author-info {
							display: flex;
							align-items: center;
						}
						.comment-section ol li p {
							margin-top: 0.5rem;
							margin-bottom: 0.25rem;
						}
						.comment-section ol .author-info>img {
							width: 40px;
							height: 40px;
							border-radius: 20px;
							margin-right: 10px;
						}
						.comment-section ol li .reply>button {
							background-color: unset;
							text-transform: uppercase;
						    letter-spacing: 1px;
						    color: rgba(255, 255, 255, .7);
						    padding: 0;
						    font-size: 0.875rem;
						    border: none;
						    background: none;
						    outline: none;
						    cursor: pointer;
						}
						.comment-section ol.children li {
							padding-left: 1.25rem;
							padding-top: 1.25rem;
							border-left:2px solid #00abc9 ;
						}
						.repond>small {
							color: rgba(255, 255, 255, .7);
						}
						.repond form {
							display: flex;
							flex-wrap: wrap;
						}
						.repond form .form-control {
							background-color:#000928 ;
							color: #fff;
							border: 1px solid #fff;
						}
						.repond form .fill-comment,
						.repond form .submit-form {
							margin-bottom: 1rem;
						    -webkit-flex: 0 0 100.00000%;
						    -ms-flex: 0 0 100.00000%;
						    flex: 0 0 100.00000%;
						    max-width: 100.00000%;
						}
						.repond form .fill-author,
						.repond form .fill-email {
							margin-bottom: 1rem;
						    -webkit-flex: 0 0 50.00000%;
						    -ms-flex: 0 0 50.00000%;
						    flex: 0 0 50.00000%;
						    max-width: 50.00000%;
						}
						.repond form .fill-author {
							padding-right: 1rem;
						}
						.repond form .fill-email {
							padding-left: 1rem;
						}
						.repond form .submit-form .btn-submit-comment {
							width: 100%;
							background-color:#000928 ;
							border:1px solid #616e96;
							color: #616e96;
							font-weight: 600;
						}
					</style>
				</section>
				<script src="{{ url('frontend/js/comment.js') }}"></script>
				<!-- end -->

			</div>
			<div class="col-12">@include('frontend.layouts.ads.banner-3')</div>
		</div>
	</div>
</div>
<div id="cal1">&nbsp;</div>
<div id="cal2">&nbsp;</div>
<div id="tooltip" class="arrow_box">
	<span class="share"> Share </span>
	<button type="button" class="btn-sm btn-twitter copy-noted" onclick="shareSocial('twitter')"><i class="fab fa-twitter"></i></button>
	<button type="button" class="btn-sm btn-facebook save-noted" onclick="shareSocial('facebook')"><i class="fab fa-facebook-f"></i></button>
</div>
<!-- rate -->
<script>
    var rateSave = {{$data->rate}};
    var id = {{$data->id}};
    var list_rate = [];
    var rate_before = 0;
    $(".rateYo").rateYo({
        starWidth: "20px",
        spacing: "6px",
        numStars:5,
        fullStar: true,
        rating: rateSave,
        maxValue:5,
        precision: 5,
        normalFill: "#626f97",
        ratedFill: "#ffca70"
    })
    $(".rateYo").rateYo().on("rateyo.set", function (e, data) {
        if(localStorage.getItem("Rate")!=null) {
            list_rate = JSON.parse(localStorage.getItem("Rate"));
            for(let i = 0; i<list_rate.length; i++) {
                if(list_rate[i].id==id) {
                    rate_before = list_rate[i].rate
                    list_rate.splice(i,1)
                }
            }
        }
        let rate = data.rating;
        let rate_item = {id:id, rate:rate}
        list_rate.push(rate_item)
        let JsonRate = JSON.stringify(list_rate)
        localStorage.setItem('Rate',JsonRate)
        $.ajax({
            data: {
                "id": id,
                "rate" : rate,
                "rate_before": rate_before
            },
            url:'/ajax/rate',
            success:function(res) {
                Swal.fire({
                    title: 'success',
                    text: "Thank you!",
            		type: 'success',
				})
                $('.detail-rate').html(res.rate);
                $('.detail-vote').html(res.vote);
            }

        })
    })
    $('.more-des .item').on('click', function() {
		let id = $(this).attr("data-id")
	    $('html, body').animate({
            scrollTop: $('#'+ id).offset().top - 70
        }, 400)
        return false;
	});
</script>
<!-- end -->
<script>
	var ele = document.getElementById('tooltip');
	var sel = window.getSelection();
	var rel1= document.createRange();
	rel1.selectNode(document.getElementById('cal1'));
	var rel2= document.createRange();
	rel2.selectNode(document.getElementById('cal2'));

	if( window.innerWidth < 768) {
		document.addEventListener("selectionchange", function(event) {
			setTimeout(function() {
				if (window.getSelection) {
					content_noted = window.getSelection();
					if (content_noted.rangeCount) {
						var container = document.createElement("div.c-content");
						for (var i = 0, len = content_noted.rangeCount; i < len; ++i) {
							container.appendChild(content_noted.getRangeAt(i).cloneContents());
						}
						content_noted = container.innerHTML;
					}

					if (content_noted != '') {
						var r = sel.getRangeAt(0).getBoundingClientRect();
						var rb1 = rel1.getBoundingClientRect();
						var rb2 = rel2.getBoundingClientRect();
						ele.style.top = (r.bottom - rb2.top) * 100 / (rb1.top - rb2.top) + 'px'; //this will place ele below the selection
						ele.style.left = (r.left - rb2.left) * 100 / (rb1.left - rb2.left) + 'px';
						$('#tooltip').addClass('show')
					} else {
						$('#tooltip').removeClass('show')
					}
				} else if (document.content_noted) {
					content_noted.selection = document.content_noted.createRange();
				}
			}, 100);

		});
	} else {
		$(".content input[type=image], .content img").mouseover(function(){
			var txt1 = "<div id=\"tooltip\" class=\"arrow_box show tooltip_img\"><span class=\"share\">Share</span><button type=\"button\" class=\"btn-sm btn-twitter copy-noted\" onclick=\"shareSocialImg('twitter')\"><i class=\"fab fa-twitter\"></i></button><button type=\"button\" class=\"btn-sm btn-facebook save-noted\" onclick=\"shareSocialImg('facebook')\"><i class=\"fab fa-facebook-f\"></i></button></div>";
			$(this).parent().append(txt1)
        });



        /* $( ".content input[type=image]" ).mouseout(function(){
			$(this).parent().children(".arrow_box").remove();
        });  */
		$('body').click(function() { 
			$(".content input[type=image], .content img").parent().children(".arrow_box").remove();
		});

		$('.content').bind('mouseup', function(e){
			if (window.getSelection) {
				content_noted = window.getSelection();
				if (content_noted.rangeCount) {
					var container = document.createElement("div.c-content");
					for (var i = 0, len = content_noted.rangeCount; i < len; ++i) {
						container.appendChild(content_noted.getRangeAt(i).cloneContents());
					}
					content_noted = container.innerHTML;
				}
				/* alert(content_noted) */
				if (content_noted != '') {
					var r = sel.getRangeAt(0).getBoundingClientRect();
					var rb1 = rel1.getBoundingClientRect();
					var rb2 = rel2.getBoundingClientRect();
					ele.style.top = (r.bottom - rb2.top)*100/(rb1.top-rb2.top) + 'px'; //this will place ele below the selection
					ele.style.left = (r.left - rb2.left)*100/(rb1.left-rb2.left) + 'px';
					$('#tooltip').addClass('show')
				} else {
					$('#tooltip').removeClass('show')
				}
			} else if (document.content_noted) {
				content_noted.selection = document.content_noted.createRange();
			}
		});
	}

	url_share = '{{ url()->current() }}';
	shareSocialImg = function(social) {
		if (social == 'facebook') {
			window.open('https://www.facebook.com/sharer.php?u=' + url_share, '_blank', "width=500,height=600");
		} else {
			if (content_noted.length > 280) {
				content_noted = content_noted.substring(0, 280);
			}
			if (content_noted == '') {
				content_noted = '{{ $data->title }}';
			}
			window.open('https://twitter.com/share?url='+ url_share +'&text=' + content_noted, '_blank', "width=500,height=600");
		}
	}

	shareSocial = function(social) {
		if (social == 'facebook') {
			if (content_noted.indexOf('<img ') !== -1) {
				var elem= document.createElement("body");
				elem.innerHTML = content_noted;
				var images = elem.getElementsByTagName("img");

				for(var i=0; i < images.length; i++){
					url_share = images[i].src;
				}
				content_noted = '';
			}
	
			if (content_noted.indexOf('type="image"') !== -1) {
				var elem= document.createElement("body");
				elem.innerHTML = content_noted;
				var images = elem.getElementsByTagName("input");
				for(var i=0; i < images.length; i++){
					url_share = images[i].src;
				}
	
				content_noted = '';
			}
		}

		content_noted = content_noted.trim();
		content_noted = content_noted.replace('&nbsp;', ' ');
		content_noted = content_noted.replace(/<[^>]*>?/gm, '');
		content_noted = content_noted.replace(/(\r\n|\n|\r)/gm, "");
		/* console.log(content_noted) */

		if (social == 'facebook') {
			window.open('https://www.facebook.com/sharer.php?u=' + url_share, '_blank', "width=500,height=600");
		} else {
			if (content_noted.length > 280) {
				content_noted = content_noted.substring(0, 280);
			}

			if (content_noted == '') {
				content_noted = '{{ $data->title }}';
			}

			window.open('https://twitter.com/share?url='+ url_share +'&text=' + content_noted, '_blank', "width=500,height=600");
			
		}
	}

	/* access_token = 'APP ID|APP SECRET' */
	/* function getShareCount(url_share){
		url = $(".url").val();
		api_url = 'https://graph.facebook.com/v3.0/?id='+ url_share +'&fields=og_object{engagement}&access_token=2090463021032113|ca2390d9117fdfba4d915c00649e401f';
		$.ajax({
			url:api_url,
			type:'get',
			success:function(res){
				count_share_face = 0;

				if (typeof res.og_object != 'undefined') {
					count_share_face = res.og_object.engagement.count;
				}
			}
		});
	}

	getShareCount('https://gospeedcheck.com/article/google-will-soon-add-app-store-privacy-labels-to-its-ios-apps-217'); */
</script>

@push('scripts')
	@if(isset($article_speed))
		<script>
			var clock_default_color = '#313c5e';
			var clock_selected_color = '#00e1ff';
			var clock_rect_div_arrs = [];
			var current_server_selected = false;

			var setting_obj = {
				'unit-time-layout': '12h',
				'unit-date-layout': 'mm/dd/yyyy',
				'unit-distance-layout': 'kilometers',
				'unit-speed-layout': 'Mbps',
				'unit-server-layout': 0,
			};
			var list_server =