@extends('fronts.layouts.index_layout')

{{--<title>衛生福利部-公共場所AED急救資訊網</title>--}}
@section('content')

<!-- Global site tag (gtag.js) - Google Analytics 
<script async src="https://www.googletagmanager.com/gtag/js?id=G-R2FGVBKG4M"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-R2FGVBKG4M');

  gtag('event', 'pageviews');
</script>

<script src="https://www.google-analytics.com/analytics.js"></script>
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'G-Q8NMEDRCXS', 'auto');
  ga('send', 'pageview');
</script>
-->
    <div class="herosection img-wrap" style="background-color: rgba(11, 145, 155, 0.801);">
		<div class="row bg">
			<div class="col-xl-7"></div>
			<div class="col-xl-5">
				<div class="row jc-c">
					<div class="ren center col-xl-4 col-lg-2 col-md-3 col-sm-3">
						<div class="fbox-icon mx-auto fbox-icon1" data-animate="bounceIn" data-delay="200">
							<a href="{{url('map')}}"><img src="images/icon-1.png" alt="Powerful Performance"></a>
						</div>
						<h2 class="txt">現有AED</h2>
						<div class="counter counter-lined"><span data-from="3000" data-to="{{$aedsCount}}"
								data-refresh-interval="100" data-speed="1000" data-comma="true"></span>
						</div>
					</div>
					<div class="ren center col-xl-4 col-lg-2 col-md-3 col-sm-3">
						<div class="fbox-icon mx-auto fbox-icon1" data-animate="bounceIn" data-delay="200">
							<a href="{{url('content',array('articleCategoryId'=>16))}}"><img src="images/icon-4.png" alt="Powerful Performance"></a>
						</div>
						<h2 class="txt">常見問答</h2>
					</div>
				</div>

				<div class="row jc-c">
					<div class="ren center col-xl-4 col-lg-2 col-md-3 col-sm-3">
						<div class="fbox-icon mx-auto fbox-icon1" data-animate="bounceIn" data-delay="200">
							<a href="{{url('map')}}"><img src="images/icon-2.png" alt="Powerful Performance"></a>
						</div>
						<h2 class="txt">安心場所</h2>
						<div class="counter counter-lined"><span data-from="3000" data-to="{{$safePlacesCount}}"
								data-refresh-interval="100" data-speed="1000" data-comma="true"></span>
						</div>
					</div>
					<div class="ren center col-xl-4 col-lg-2 col-md-3 col-sm-3">
						<div class="fbox-icon mx-auto fbox-icon1" data-animate="bounceIn" data-delay="200">
							<a href="{{url('login')}}"><img src="images/icon-3.png" alt="Powerful Performance"></a>
						</div>
						<h2 class="txt">管理登錄</h2>
					</div>
				</div>
			</div>
		</div>
	</div>

    <!-- Content
    ============================================= -->
    <section id="content">
			<!-- aed-map  -->
			<div class="row align-items-stretch">
				<div class="col-md-7 col-padding aed-counter aed-map-left">
					<div class="row col-mb-50">
						<div class="col-lg-6">
							<h2 class="text-left  text" style="font-size: 2.500em;">累積到訪人次
							</h2>
							<p class="counter text-left  aed-map-decoration" style="    margin-bottom: -45px;">
								<span data-from="50" data-to="{{$analyticsData}}" data-refresh-interval="80" data-speed="1000"
									data-comma="true"> </span>
							</p>
							<p class=""
								style="font-size: 2.500em; color: #B84B4C; font-weight: 700;    margin-bottom: -3px;">
								什麼是AED?</p>
							<p class="lead mb-0 text-left ">
								AED(Automated External
								Defibrillator)，稱為「自動體外心臟電擊去顫器」，是一台能夠自動偵測傷病患心律脈搏、並施以電擊使心臟恢復正常運作的儀器，因為使用的方式相當容易，開啟機器時會有語音說明其使用方式，並有圖示輔助說明，就像使用「傻瓜相機」一樣簡單，所以，坊間稱之為「傻瓜電擊器」。

							</p>
							<div class="" style="text-align: right;">
								<a href="{{url('content',array('articleCategoryId'=>2))}}/#category-8" class="button button-reveal button-medium text-right"
									style="border-radius: 10px;">
									<span>...查看更多</span>
									<i class="icon-angle-right"></i>
								</a>
							</div>
						</div>
						<div class="col-lg-6">
							<div class="mt" data-animate="bounceIn" data-delay="400">
								<img src="{{url('images/index/services/main-bg.svg')}}" alt="Retina Graphics">
							</div>
						</div>
					</div>
				</div>
				<div class="col-md-5 col-padding min-vh-50 order-md-last aed-map-right">
					<div class="col-12 col-lg-auto mt-4 mt-lg-0">
						<div class="row col-mb-50">
							<div class="col-md-12 col-lg-12">
								<div class="widget clearfix">
									<div class="row">
										<div class="col-lg-6 bottommargin-sm">
											<div class="" data-animate="bounce" data-delay="400">
												<img src="{{url('images/index/MAP.png')}}" alt="Retina Graphics">
											</div>
										</div>
										<div class="col-lg-6 bottommargin-sm">

										</div>
									</div>
								</div>
							</div>
							<div class="col-md-12 col-lg-12">
								<div class="widget clearfix">
									<div class="row">
										<div class="col col-md-12 col-lg-12 clearfix mt" style="text-align: center;">
											<a href="{{url('map')}}"
												class="button button-reveal button-large button-circle text-right m-0">
												<span>前往檢索地圖</span>
												<i class="icon-angle-right"></i>
											</a>
										</div>

									</div>

								</div>
							</div>
						</div>
					</div>
				</div>
			</div> <!-- aed-map  -->

			<div class="row aed-guide">
				<div class="col-padding clearfix">
					<div class="row col-mb-50">
						<div class="col-lg-6">
							<h2 class="text-left ade-guide px-2">最新消息</h2>
                            @foreach($newArticles as $row)
                                <a href="{{url('news')}}/#newsId-{{$row->id}}">
                                    <p class="lead mb-0 text-left px-2 news">
                                        <small>{{date('Y-m-d',strtotime($row->published_at))}}</small> {{$row->title}}
                                    </p>
                                </a>
                            @endforeach
						</div>
						<div class="col-lg-6">
							<div class="px-6 backInRight animated" data-animate="backInRight" data-delay="400">
								<img src="images/NEWS.png" alt="Retina Graphics">
							</div>
						</div>
					</div>
					<div class="line"></div>
					<div class="row col-mb-50">
						<div class="col-md-6 col-lg-4">
							<div class="feature-box fbox-lg fbox-rounded fbox-effect fbox-yellow">
								<a href="content/3#category-10"
									class="fbox-icon">
									<span style="display: none;">AED相關法規</span>
									<i class="icon-cog1"></i>
								</a>
								<div class="fbox-content ">
									<h3>AED相關法規
									</h3>
									<p>關於緊急醫療救護法及公共場所必要緊急救護設備管理辦法等詳細說明。
									</p>
								</div>
							</div>
						</div>
						<div class="col-md-6 col-lg-4">
							<div class="feature-box fbox-lg fbox-rounded fbox-effect fbox-tangerine">
								<a href="content/4" class="fbox-icon">
									<span style="display: none;">各類指引</span>
									<i class="icon-question-sign"></i>
								</a>
								<div class="fbox-content">
									<h3>各類指引
									</h3>
									<p>公共場所AED設置流程、AED急救資訊網登錄使用等指引。
									</p>
								</div>
							</div>
						</div>
						<div class="col-md-6 col-lg-4">
							<div class="feature-box fbox-lg fbox-rounded fbox-effect fbox-Orange">
								<a href="content/5" class="fbox-icon">
									<span style="display: none;">教育訓練</span>
									<i class="icon-info-sign"></i>
								</a>
								<div class="fbox-content">
									<h3>教育訓練
									</h3>
									<p>公共場所民眾CPR+AED教材及AED管理員線上課程(e等公務園+學習平臺)。
									</p>
								</div>
							</div>
						</div>
					</div>

				</div>
			</div>
		</section>
    <!-- #content end -->

@endsection