@extends ('site::public.layout')
@section('content')
	<main class="faq-page">
		<section class="global-banner t2 animate">
			<img src="{{ asset('styling/img/blank.png') }}" data-src="{{ asset('styling/img/banner-faq.png') }}" class="lazy bg">
			<img src="{{ asset('styling/img/blank.png') }}" data-src="{{ asset('styling/img/bg-faq.png') }}" class="lazy bg bg--bottom">
			<figure class="">
				<img src="{{ asset('styling/img/blank.png') }}" data-src="{{ asset('styling/img/figure-faq.png') }}" class="lazy">
			</figure>
			<div class="container">
				<div class="text from-right">
					<h1 class="display">
						{!! $section_data['title'] !!}<br /> {!! $section_data['title_secondary'] !!} <br />{!! $section_data['title_third'] !!}
					</h1>
					<h6>
						{!! $section_data['excerpt'] !!}
					</h6>
				</div>
			</div>
		</section>
		<section class="bg-linear">
			<div class="container">
				@if($data_faq)
				<div class="sticky-wrapper">
					<div id="rightContent">
						<div class="contact__info sticky-content">
							<h6>{!! get_staticwording('listofcontent', session('locale')) !!}</h6>
							<ul>
								@foreach($data_faq as $key=>$cat)
									<li>
										<a href="#faq-{{ $cat->id }}">{!! $cat->outputTranslate('title', session('locale')) !!}</a>
									</li>
								@endforeach
							</ul>
						</div>
					</div>
					<div id="leftContent">
						@foreach($data_faq as $key=>$cat)
							<div class="mb-20">
								<h4 id="faq-{{ $cat->id }}">{!! $cat->outputTranslate('title', session('locale')) !!}</h4>
								<div class="accr">
									@foreach($cat->lists as $key2=>$ques)
										<div class="accr__single">
											<div class="accr__title">
												<span>
													{!! $ques->outputTranslate('title', session('locale')) !!}
													<button>
														<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
															<path fill-rule="evenodd" clip-rule="evenodd" d="M0.229184 0.225519C0.372228 0.0880472 0.564059 0.0129274 0.762522 0.0166679C0.960985 0.0204084 1.14984 0.102703 1.28759 0.245467L4.99202 4.17324L8.69645 0.245467C8.76379 0.171316 8.84534 0.11142 8.93627 0.0693285C9.0272 0.0272372 9.12567 0.00380733 9.22584 0.000426662C9.326 -0.00295401 9.42583 0.0137832 9.5194 0.0496473C9.61297 0.0855114 9.69838 0.139773 9.77058 0.209215C9.84277 0.278657 9.90027 0.361868 9.93968 0.453917C9.97909 0.545966 9.9996 0.64498 9.99999 0.745092C10.0004 0.845204 9.98067 0.944377 9.94199 1.03673C9.90331 1.12909 9.84647 1.21276 9.77483 1.28277L5.53121 5.77108C5.46135 5.84348 5.3776 5.90106 5.28496 5.94039C5.19232 5.97973 5.09268 6 4.99202 6C4.89136 6 4.79173 5.97973 4.69908 5.94039C4.60644 5.90106 4.52269 5.84348 4.45283 5.77108L0.209214 1.28277C0.0715912 1.13988 -0.00361115 0.948259 0.00013343 0.750014C0.00387802 0.551769 0.0862632 0.363118 0.229184 0.225519V0.225519Z" fill="white" fill-opacity="0.8"/>
														</svg>
													</button>
												</span>
											</div>
											<div class="accr__content">
												{!! $ques->outputTranslate('description', session('locale')) !!}
											</div>
										</div>
									@endforeach
								</div>
							</div>
						@endforeach
					</div>
				</div>
				@endif
				<div class="other-info mt-20">
					<h6>
						{!! $section_data['bottom_wa_text'] !!}
					</h6>
					<div class="wa">
						<b>BEVANANDA WHATSAPP</b>
						<a href="https://wa.me/{!! str_replace(array('–', '-', ' '), '', $section_data['bottom_wa_no']) !!}" target="blank">
							<span>
								<img src="{{ asset('styling/img/icon-whatsapp.svg') }}">
								{!! $section_data['bottom_wa_no'] !!}
							</span>
						</a>
					</div>
				</div>
				<div class="other-info">
					<p>
						{!! $section_data['bottom_contact_text'] !!}
					</p>
					<div class="phone">
						<a href="tel:{!! str_replace(array('–', '-'), '', $section_data['bottom_contact_phone']) !!}">
							<span><img src="{{ asset('styling/img/icon-phone.svg') }}"> {!! $section_data['bottom_contact_phone'] !!}</span> 
						</a>
						<a href="mailto:{!! $section_data['bottom_contact_email'] !!}">
							<span><img src="{{ asset('styling/img/icon-email.svg') }}"> {!! $section_data['bottom_contact_email'] !!}</span>
						</a>
					</div>
				</div>
			</div>
		</section>
	</main>
@endsection