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

@section('content')
<main class="about-us-page">
	<section class="about-us-banner">
		<div class="container">
			<div class="swiper-container">
				<div class="swiper-wrapper">
                    @foreach ($slider as $k=>$sld)
                        <div class="swiper-slide">
                            <img src="{{ asset('styling/img/blank.png') }}" data-src="{{ $sld->image_desktop_formated }}" class="lazy bg" alt="{!! !empty($sld->alt_image_desktop) ? $sld->alt_image_desktop : $sld->title !!}">
                            <div class="text">
                                <div class="h1 display">
                                    {!! $sld->outputTranslate('title', session('locale')) !!}
                                </div>
                                <h6>
                                    {!! $sld->outputTranslate('description', session('locale')) !!}
                                </h6>
                            </div>
                        </div>
                    @endforeach
				</div>
				<div class="swiper-pagination"></div>
				<button class="swiper-prev"><img src="{{ asset('styling/img/btn-prev-2.svg') }}"></button>
				<button class="swiper-next"><img src="{{ asset('styling/img/btn-next-2.svg') }}"></button>
			</div>
		</div>
	</section>

    <section class="about-us-body">
		<div class="container">
			<div>
				<h1 class="mb-8">
					{{ $section_data['about_sekilas'] }}
				</h1>
				<p>
					{!! $section_data['about_sekilas_content'] !!}
				</p>
			</div>
		</div>
	</section>

    @if($milestone)
	<section class="about-us-history">
		<div class="container">
			<h1 class="mb-8">
				{!! $section_data['about_milestone'] !!}
			</h1>
			<p>
				{!! $section_data['about_milestone_excerpt'] !!}
			</p>
			<div class="pagination">
				<button class="prev"><img src="{{ asset('styling/img/btn-prev-3.svg') }}"></button>
				<div class="swiper-container">
					<div class="swiper-wrapper">
                        @foreach($milestone as $key => $mls)
                            <div class="swiper-slide">
                                <button>
                                    {!! $mls->year !!}
                                </button>
                            </div>
                        @endforeach
					</div>
				</div>
				<button class="next"><img src="{{ asset('styling/img/btn-next-3.svg') }}"></button>
			</div>
			<div class="swiper-container slider">
				<div class="swiper-wrapper">
                    @foreach($milestone as $key => $mlstn)
                        <div class="swiper-slide">
                            <img src="{{ asset('styling/img/blank.png') }}" data-src="{{ $mlstn->image_desktop_formated }}" class="lazy bg" alt="">
                            <div class="text">
                                <div>
                                    <h6>{!! $mlstn->outputTranslate('title', session('locale')) !!}</h6>
                                    <p>
                                        {!! $mlstn->outputTranslate('caption', session('locale')) !!}
                                    </p>
                                </div>
                            </div>
                        </div>
                    @endforeach
				</div>
			</div>
		</div>
	</section>
    @endif

	<section class="about-us-visimisi">
		<div class="container">
			<div class="wrapper">
				<div>
					<div class="text">
						<div class="h1">{{ $section_data['about_vision'] }}</div>
						<h4>
						{!! $section_data['about_vision_content'] !!}
						</h4>
					</div>
					<img src="{{ asset('styling/img/blank.png') }}" data-src="{{ $section_data['about_vision_image'] }}" class="lazy">
				</div>
				<div>
					<div class="text">
						<div class="h1">{{ $section_data['about_mission'] }}</div>
						<h4>
						{!! $section_data['about_mission_content'] !!}
						</h4>
					</div>
					<img src="{{ asset('styling/img/blank.png') }}" data-src="{{ $section_data['about_mission_image'] }}" class="lazy">
				</div>
			</div>
		</div>
	</section>

    <section class="about-us-sigap">
		<div class="container">
			<div class="h1 text-center mb-24 md:mb-8">
				{{ $section_data['about_corevalue'] }}
			</div>
			<img src="asset('styling/img/blank.png') }}" data-src="{{ $section_data['about_corevalue_image'] }}" class="lazy">
		</div>
	</section>

	
	<section>
		<div class="container">
			<div class="office">
				<div>
					<h4 class="display">{!! get_staticwording('factory', session('locale')) !!}</h4>
					<p>
						{!! (session('locale')=='id')?  setting('general.factory_address_id'):setting('general.factory_address') !!}
					</p>
					<a href="{!! setting('general.factory_map') !!}" target="blank" class="btn">
						<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>
							{!! get_staticwording('map', session('locale')) !!}
						</span>
					</a>
				</div>
				<div>
					<h4 class="display">{!! get_staticwording('office', session('locale')) !!}</h4>
					<p>
						{{ (session('locale')=='id')? setting('general.office_address_id'):setting('general.office_address') }}
					</p>
					<a href="{!! setting('general.office_map') !!}" target="blank" class="btn">
						<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>
							{!! get_staticwording('map', session('locale')) !!}
						</span>
					</a>
				</div>
			</div>
		</div>
	</section>
	
	<section>
		<div class="container">
			<div class="h1 mb-8">
				{{ $section_data['about_certificate'] }}
			</div>
			<p class="mb-16">
			{!! $section_data['about_certificate_excerpt'] !!}
			</p>
			@if($certificateData)
				@php $file_url = ''; @endphp
				<div class="srt">
					<div class="srt__single">
						<div class="grid grid-cols-3 md:grid-cols-2 gap-20 mb-20">
							@foreach($certificateData as $crt)
								@php $file_url = url($crt->file_url); @endphp
								<img src="{!! asset('styling/img/blank.png') !!}" data-src="{!! $crt->image_formated !!}" class="lazy" alt="{!! ($crt->alt_imge!='')? $crt->alt_imge:$crt->title !!}">
							@endforeach
						</div>
					</div>
					<div class="text-center">
						<a href="{!! $file_url !!}" target="blank" class="btn btn--primary btn-download-certificate-X" related-data="" related-id="" item-data="certificate" item-id="{{ $crt->id }}">{!! get_staticwording('certificatecheck', session('locale')) !!}</a>
					</div>
				</div>
			@endif
		</div>
	</section>
	
	<section>
		<div class="container">
			<div class="h1 mb-8">{{ $section_data['about_profile'] }}</div>
			<p class="mb-16">
			{{ $section_data['about_profile_excerpt'] }}
			</p>
			<div class="about-us-video" data-vid="{{ $section_data['about_yt_video_id'] }}">
				<img src="{{ asset('styling/img/blank.png') }}" data-src="{{ $section_data['about_yt_video_cover'] }}" class="lazy" id="vid-img">
				<div id="yt-player-div" style="display:none;"></div>
			</div>
		</div>
	</section>
</main>
@stop

@push('additional_script')
<script>
	var tag = document.createElement('script');
	var firstScriptTag = document.getElementsByTagName('script')[0];
	tag.src = "https://www.youtube.com/iframe_api";
	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
		
	var player;
	var done = false;

	$(function() {
		$('body').on('click', '.about-us-video', function(e) {
			let vid = $(this).attr('data-vid');
			$('#vid-img').hide()
			$('#yt-player-div').show()
			player.playVideo();
		})
	});

	
	function onPlayerReady(event) {
		// event.target.playVideo();
	}

	function onPlayerStateChange(event) {
		if (event.data == YT.PlayerState.PLAYING && !done) {
			// video_swiper.autoplay.stop();
		}
		if (event.data == 0) {
			// video_swiper.autoplay.start()
			$('#vid-img').show()
			$('#yt-player-div').hide()
		}
	}
	function stopVideo() {
		player.stopVideo();
	}

	function onYouTubeIframeAPIReady() {		
		player = new YT.Player('yt-player-div', {
			height: '461',
			width: '820',
			videoId: '{{ $section_data['about_yt_video_id'] }}',
			playerVars: {
				'playsinline': 1,
				'rel': 0,
				'loop': 1,
			},
			events: {
				'onReady': onPlayerReady,
				'onStateChange': onPlayerStateChange,
			}
		});
	}
</script>
@endpush