@extends ('site::public.layout')
@section('content')

	<main class="contact-us-page">
		<section class="global-banner animate">
			<img src="{{ asset('styling/img/blank.png') }}" data-src="{{ $section_data['background'] }}" class="lazy bg from-bottom">
			<div class="container">
				<figure class="md:hidden">
					<img src="{{ asset('styling/img/blank.png') }}" data-src="{{ $section_data['image_secondary'] }}" class="lazy orbit">
					<img src="{{ asset('styling/img/blank.png') }}" data-src="{{ $section_data['image'] }}" class="lazy avatar hide">
				</figure>
				<figure class="hidden md:block">
					<img src="{{ asset('styling/img/blank.png') }}" data-src="{{ $section_data['image_secondary_mobile'] }}" class="lazy orbit">
					<img src="{{ asset('styling/img/blank.png') }}" data-src="{{ $section_data['image_mobile'] }}" class="lazy avatar hide">
				</figure>
				<div class="text from-right">
					<h1 class="display">{{ $section_data['title'] }}<br>{{ $section_data['title_secondary'] }}</h1>
					<h6>
						{{ $section_data['contactus_excerpt'] }}
					</h6>
					@if($section_data['contactus_cta_link']!='')
					<div class="btn-wrapper">
						<a href="mailto:{{ $section_data['contactus_cta_link'] }}" class="btn btn--primary">
							<svg width="10" height="9" viewBox="0 0 10 9" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path fill-rule="evenodd" clip-rule="evenodd" d="M0 4.5C0 4.27709 0.0790218 4.06331 0.219681 3.90568C0.36034 3.74806 0.551114 3.65951 0.750036 3.65951H7.38835L5.23025 1.46303C5.1559 1.38745 5.09585 1.29592 5.05365 1.19387C5.01144 1.09181 4.98795 0.981293 4.98456 0.868873C4.98117 0.756453 4.99795 0.644415 5.03391 0.539396C5.06987 0.434378 5.12428 0.338516 5.1939 0.257492C5.26353 0.176467 5.34696 0.111928 5.43925 0.0676995C5.53155 0.0234707 5.63082 0.000451604 5.7312 6.57867e-06C5.83158 -0.000438447 5.93101 0.0216993 6.02362 0.0651083C6.11622 0.108517 6.20011 0.172315 6.2703 0.252719L9.77047 3.89485C9.84306 3.97325 9.9008 4.06725 9.94024 4.17123C9.97967 4.2752 10 4.38702 10 4.5C10 4.61298 9.97967 4.7248 9.94024 4.82877C9.9008 4.93275 9.84306 5.02675 9.77047 5.10515L6.2703 8.74728C6.20011 8.82768 6.11622 8.89148 6.02362 8.93489C5.93102 8.9783 5.83158 9.00044 5.7312 8.99999C5.63082 8.99955 5.53155 8.97653 5.43925 8.9323C5.34696 8.88807 5.26353 8.82353 5.1939 8.74251C5.12428 8.66148 5.06987 8.56562 5.03391 8.4606C4.99795 8.35558 4.98117 8.24355 4.98456 8.13113C4.98795 8.01871 5.01144 7.90819 5.05365 7.80613C5.09585 7.70407 5.1559 7.61255 5.23025 7.53697L7.38835 5.34049L0.750036 5.34049C0.551114 5.34049 0.36034 5.25194 0.219681 5.09432C0.0790217 4.93669 0 4.72291 0 4.5Z" fill="white"></path>
							</svg>
							{{ $section_data['contactus_cta_text'] }}
						</a>
					</div>
					@endif

				</div>
			</div>
		</section>
		<section class="contact">
			<div class="container">
				<div class="contact__body sticky-wrapper">
					<div id="rightContent">
						<div class="contact__info sticky-content">
							<h6>{!! get_staticwording('fastcontact', session('locale')) !!}</h6>
							<div>
								<img src="{{ asset('styling/img/icon-phone.svg') }}">
								<span>
									<small>{!! get_staticwording('phone', session('locale')) !!}</small>
									<a href="tel:{{ str_replace(array('–', '-'), '', setting('general.phone')) }}">{{ setting('general.phone') }}</a>
								</span>
							</div>
							<div>
								<img src="{{ asset('styling/img/icon-email.svg') }}">
								<span>
									<small>{!! get_staticwording('email', session('locale')) !!}</small>
									<a href="mailto:{!! setting('general.email') !!}">{{ setting('general.email') }}</a>
								</span>
							</div>
							<div>
								<img src="{{ asset('styling/img/icon-whatsapp-2.svg') }}">
								<span>
									<small>{!! get_staticwording('whatsapp', session('locale')) !!}</small>
									<a href="https://wa.me/{{ str_replace(array('–', '-', ' '), '', setting('general.whatsapp')) }}" target="blank">{{ setting('general.whatsapp') }}</a>
								</span>
							</div>
							<div>
								<p>
									<b>{!! get_staticwording('workingtime', session('locale')) !!}</b>
									<span class="block">
										{!! $section_data['headoffice'] !!} 
										<br /> {!! $section_data['headoffice_content'] !!}
										@if( isset($section_data['headoffice_content_secondary']) && $section_data['headoffice_content_secondary']!='' )
											<br /> {!! $section_data['headoffice_content_secondary'] !!}
										@endif
									</span>
									<span class="block">
										{!! $section_data['warehouse'] !!} 
										<br /> {!! $section_data['warehouse_content'] !!}
										@if( isset($section_data['warehouse_content_secondary']) && $section_data['warehouse_content_secondary']!='' )
											<br /> {!! $section_data['warehouse_content_secondary'] !!}
										@endif
									</span>
								</p>
							</div>
						</div>
					</div>
					<div id="leftContent">
						<div class="mb-10">
							<h4 class="display">{!! get_staticwording('factory', session('locale')) !!}</h4>
							<p>
								{{ setting('general.factory_address') }}
							</p>
							@if($section_data['contactus_cta_link2']!='')
								<a href="{!! $section_data['contactus_cta_link2'] !!}" target="blank" class="btn btn--text">
									<span>
										<svg width="10" height="9" viewBox="0 0 10 9" fill="none" xmlns="http://www.w3.org/2000/svg">
										<path fill-rule="evenodd" clip-rule="evenodd" d="M0 4.5C0 4.27709 0.0790218 4.06331 0.219681 3.90568C0.36034 3.74806 0.551114 3.65951 0.750036 3.65951H7.38835L5.23025 1.46303C5.1559 1.38745 5.09585 1.29592 5.05365 1.19387C5.01144 1.09181 4.98795 0.981293 4.98456 0.868873C4.98117 0.756453 4.99795 0.644415 5.03391 0.539396C5.06987 0.434378 5.12428 0.338516 5.1939 0.257492C5.26353 0.176467 5.34696 0.111928 5.43925 0.0676995C5.53155 0.0234707 5.63082 0.000451604 5.7312 6.57867e-06C5.83158 -0.000438447 5.93101 0.0216993 6.02362 0.0651083C6.11622 0.108517 6.20011 0.172315 6.2703 0.252719L9.77047 3.89485C9.84306 3.97325 9.9008 4.06725 9.94024 4.17123C9.97967 4.2752 10 4.38702 10 4.5C10 4.61298 9.97967 4.7248 9.94024 4.82877C9.9008 4.93275 9.84306 5.02675 9.77047 5.10515L6.2703 8.74728C6.20011 8.82768 6.11622 8.89148 6.02362 8.93489C5.93102 8.9783 5.83158 9.00044 5.7312 8.99999C5.63082 8.99955 5.53155 8.97653 5.43925 8.9323C5.34696 8.88807 5.26353 8.82353 5.1939 8.74251C5.12428 8.66148 5.06987 8.56562 5.03391 8.4606C4.99795 8.35558 4.98117 8.24355 4.98456 8.13113C4.98795 8.01871 5.01144 7.90819 5.05365 7.80613C5.09585 7.70407 5.1559 7.61255 5.23025 7.53697L7.38835 5.34049L0.750036 5.34049C0.551114 5.34049 0.36034 5.25194 0.219681 5.09432C0.0790217 4.93669 0 4.72291 0 4.5Z" fill="white"/>
										</svg>
										{{ $section_data['contactus_cta_text2'] }}
									</span>
								</a>
							@endif
						</div>
						<div class="mb-10">
							<h4 class="display">{!! get_staticwording('marketingoffice', session('locale')) !!}</h4>
							<p>
								{{ setting('general.office_address') }}
							</p>
							@if($section_data['contactus_cta_link3']!='')
								<a href="{!! $section_data['contactus_cta_link3'] !!}" target="blank" class="btn btn--text">
									<span>
										<svg width="10" height="9" viewBox="0 0 10 9" fill="none" xmlns="http://www.w3.org/2000/svg">
										<path fill-rule="evenodd" clip-rule="evenodd" d="M0 4.5C0 4.27709 0.0790218 4.06331 0.219681 3.90568C0.36034 3.74806 0.551114 3.65951 0.750036 3.65951H7.38835L5.23025 1.46303C5.1559 1.38745 5.09585 1.29592 5.05365 1.19387C5.01144 1.09181 4.98795 0.981293 4.98456 0.868873C4.98117 0.756453 4.99795 0.644415 5.03391 0.539396C5.06987 0.434378 5.12428 0.338516 5.1939 0.257492C5.26353 0.176467 5.34696 0.111928 5.43925 0.0676995C5.53155 0.0234707 5.63082 0.000451604 5.7312 6.57867e-06C5.83158 -0.000438447 5.93101 0.0216993 6.02362 0.0651083C6.11622 0.108517 6.20011 0.172315 6.2703 0.252719L9.77047 3.89485C9.84306 3.97325 9.9008 4.06725 9.94024 4.17123C9.97967 4.2752 10 4.38702 10 4.5C10 4.61298 9.97967 4.7248 9.94024 4.82877C9.9008 4.93275 9.84306 5.02675 9.77047 5.10515L6.2703 8.74728C6.20011 8.82768 6.11622 8.89148 6.02362 8.93489C5.93102 8.9783 5.83158 9.00044 5.7312 8.99999C5.63082 8.99955 5.53155 8.97653 5.43925 8.9323C5.34696 8.88807 5.26353 8.82353 5.1939 8.74251C5.12428 8.66148 5.06987 8.56562 5.03391 8.4606C4.99795 8.35558 4.98117 8.24355 4.98456 8.13113C4.98795 8.01871 5.01144 7.90819 5.05365 7.80613C5.09585 7.70407 5.1559 7.61255 5.23025 7.53697L7.38835 5.34049L0.750036 5.34049C0.551114 5.34049 0.36034 5.25194 0.219681 5.09432C0.0790217 4.93669 0 4.72291 0 4.5Z" fill="white"/>
										</svg>
										{{ $section_data['contactus_cta_text3'] }}
									</span>
								</a>
							@endif
						</div>

						@if($survey)
						<div class="survey">
							<div class="h1 md:text-center">{!! $section_data['contactus_survey'] !!}</div>
							<p class="mb-20 md:text-center">
								{!! $section_data['contactus_survey_excerpt'] !!}
							</p>
							<div class="survey__sub">
								<span>1.</span>
								<span>
									{!! $section_data['contactus_survey_info'] !!}
								</span>
							</div>
							@php $a = ''; @endphp
							@foreach($survey as $key=>$item)
								@php 
									if($a==''){
										$a .= 'a'.$item->id; 
									}else{
										$a .= ',a'.$item->id; 
									}
								@endphp
								<div class="survey__single">
									<label>{!! $item->outputTranslate('question', session('locale')) !!}</label>
									@if($item->type=='choice')
										<div class="survey__answer">
											<div>
											@foreach($item->answer as $idx=>$answer)
												@if($idx==2 || $idx==4)
													</div><div>
												@endif
												<div>
													<span class="check-wrapper">
														<input type="radio" name="a{{$item->id}}" class="radio answer" data-question="{{$item->id}}" value="{!! $answer !!}">
														<label></label>
													</span>
													<span>{!! $answer !!}</span>
												</div>
											@endforeach
											</div>
										</div>
									@else
										<textarea class="q-essay" name="a{{$item->id}}" id="a{{$item->id}}" data-question="{{$item->id}}" data-question-text="{!! $item->outputTranslate('question', session('locale')) !!}"></textarea>
									@endif
								</div>
								<div class="error" id="error-{{$item->id}}" style="display:none;"></div>
								<input type="hidden" name="surveyanswer[]" value="" class="surveyanswer" id="qa-{{$item->id}}" readonly="readonly" data-question="{{$item->id}}" data-answer="" data-question-text="{!! $item->outputTranslate('question', session('locale')) !!}" />
							@endforeach
							
							{{-- <div class="survey__single">
								<label>
									{!! get_staticwording('survey_description', session('locale')) !!}
								</label>
								<textarea name="information" id="information"></textarea>
							</div> --}}

							<div id="step">
								<input type="hidden" name="surveystep" value="1" class="surveystep" id="surveystep" readonly="readonly" />
							</div>

							<div class="btn-wrapper">
								<button class="btn btn--primary" id="submit-survey">
									<svg width="10" height="9" viewBox="0 0 10 9" fill="none" xmlns="http://www.w3.org/2000/svg">
										<path fill-rule="evenodd" clip-rule="evenodd" d="M0 4.5C0 4.27709 0.0790218 4.06331 0.219681 3.90568C0.36034 3.74806 0.551114 3.65951 0.750036 3.65951H7.38835L5.23025 1.46303C5.1559 1.38745 5.09585 1.29592 5.05365 1.19387C5.01144 1.09181 4.98795 0.981293 4.98456 0.868873C4.98117 0.756453 4.99795 0.644415 5.03391 0.539396C5.06987 0.434378 5.12428 0.338516 5.1939 0.257492C5.26353 0.176467 5.34696 0.111928 5.43925 0.0676995C5.53155 0.0234707 5.63082 0.000451604 5.7312 6.57867e-06C5.83158 -0.000438447 5.93101 0.0216993 6.02362 0.0651083C6.11622 0.108517 6.20011 0.172315 6.2703 0.252719L9.77047 3.89485C9.84306 3.97325 9.9008 4.06725 9.94024 4.17123C9.97967 4.2752 10 4.38702 10 4.5C10 4.61298 9.97967 4.7248 9.94024 4.82877C9.9008 4.93275 9.84306 5.02675 9.77047 5.10515L6.2703 8.74728C6.20011 8.82768 6.11622 8.89148 6.02362 8.93489C5.93102 8.9783 5.83158 9.00044 5.7312 8.99999C5.63082 8.99955 5.53155 8.97653 5.43925 8.9323C5.34696 8.88807 5.26353 8.82353 5.1939 8.74251C5.12428 8.66148 5.06987 8.56562 5.03391 8.4606C4.99795 8.35558 4.98117 8.24355 4.98456 8.13113C4.98795 8.01871 5.01144 7.90819 5.05365 7.80613C5.09585 7.70407 5.1559 7.61255 5.23025 7.53697L7.38835 5.34049L0.750036 5.34049C0.551114 5.34049 0.36034 5.25194 0.219681 5.09432C0.0790217 4.93669 0 4.72291 0 4.5Z" fill="white"></path>
									</svg>
									{!! get_staticwording('survey_next', session('locale')) !!}
								</button>
							</div>
						</div>
						@endif
					</div>
				</div>
			</div>
		</section>
	</main>
@endsection