@php $faqDatas = getContent(config('settings')->active_template, 'faq.element'); @endphp
@extends($activeTemplate.'layouts.dash')

@section('content')
<div style="background: none; height: auto; overflow: hidden; ">
	<div class="top" style="background: none;">
		<div data-href="{{ route('user.profile') }}" class="linkBTN" style="float:left; line-height:46px;width:50%; height:46px;cursor:pointer;" id="btnClose">
			<img src="/assets/images/arrow-back-up.png" style="margin-left:12px;width:32px;" />
		</div>
	</div>
	<div style="padding-top:30px;">
		<div style="float: left; width: 100%; text-align: center; color: #fff;">
			<div style="height: 100px; line-height: 100px; margin:0 auto; width:100px; border-radius: 100px; background:#fff;">
				<img src="/assets/images/question.png" style="height: 100px; border-radius:100px;">
			</div>
			<div style="padding:5px; padding-top:10px;color:#000; font-weight:bold; font-size:20px; margin-top:10px;" id="uid">Asked Questions</div>
			<div style="padding:5px; padding-top:5px;color:#000; font-size:12px;">你需要 What you need to know ~ 知道什麼</div>
		</div>
	</div>
</div>

<div class="layui-form layui-tab-content" style="padding:5px 10px; margin:60px 0;">
	@foreach($faqDatas as $singleFaq)
	<div style="background: #fff; width: 100%; margin: 0 auto; margin-top: 0px;  padding-bottom:10px; height: auto; overflow: hidden; position: relative;margin-bottom: 5px;">
		<div style="padding:15px; padding-bottom:0px; text-align:left;" class="question" data-role="collapse" data-target="question{{ $loop->index }}">
			<div style="color:#000; border-left:3px solid #000;font-size: 18px;">&nbsp;{{ __($singleFaq->data_values->question) }}</div>
		</div>
		<div style="width:98%;margin:0 auto;" class=" collapse" id="question{{ $loop->index }}" >
			<div style=" text-align:left; font-size:16px;  border-radius: 10px; width: 95%; color:#666; margin: 0 auto; height: auto; overflow: hidden; margin-top: 10px; position: relative;">
			{!! @$singleFaq->data_values->answer !!}
			</div>
		</div>
	</div>
	@endforeach
</div>
@endsection

@push('script')
<script>
	var acc = document.getElementsByClassName("question");var i;
	for (i = 0; i < acc.length; i++) {
	  acc[i].addEventListener("click", function() {
		  this.classList.toggle("opened");
		  document.getElementById(this.dataset.target).classList.toggle("collapse");
	  });
	}
</script>
@endpush
