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

<main class="partner-page">
	<section class="global-banner t2 animate">
		<img src="{{ asset('styling/img/blank.png') }}" data-src="{{ $section_data['background'] }}" class="lazy bg" alt="{{ $section_data['alt_background'] }}">
		<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="{{ $section_data['image'] }}" alt="{{ $section_data['alt_image'] }}" class="lazy">
		</figure>
		<div class="container">
			<div class="text from-right">
				<h1 class="display">{!! $section_data['title'] !!} <br>{!! $section_data['title_secondary'] !!}</h1>
				<h6>
					{!! $section_data['excerpt'] !!}
				</h6>
			</div>
		</div>
	</section>
	<section class="bg-linear">
		<div class="container">
			<div class="max-tab">
				<div class="max-tab__title">
					@foreach($partner_category as $key=>$cat)
						@if($key==0)
						<button tab="p{!! $cat->id !!}" class="active">{!! $cat->outputTranslate('title', session('locale')) !!}</button>
						@else
						<button tab="p{!! $cat->id !!}">{!! $cat->outputTranslate('title', session('locale')) !!}</button>
						@endif
					@endforeach
				</div>
				<div class="max-tab__select">
					<div class="input">
						<select class="slc">
							@foreach($partner_category as $key=>$cat)
								<button tab="p{!! $cat->id !!}">{!! $cat->outputTranslate('title', session('locale')) !!}</button>
								<option value="p{!! $cat->id !!}">{!! $cat->outputTranslate('title', session('locale')) !!}</option>
							@endforeach
						</select>
					</div>
				</div>
				<p class="text-center my-10 px-4">
					{!! $section_data['group'] !!} 
				</p>
				<div class="max-tab__content">
					@foreach($partner_category as $key=>$cat)
						<div class="p{!! $cat->id !!} @if($key==0) active @endif">
						@if(isset($partner[$cat->id]))
						<div class="partner-list">
							@foreach($partner[$cat->id] as $key=>$p)
								@php	  
								$p_img = asset('assets/img/no-image.jpg');
								if($p->image!=''){
									$img = json_decode($p->image);
									$p_img = ENV('IMG_URL').str_replace(' ', '%20', $img->path);
								}
								@endphp

								<div class="partner-item partner-detail" onclick="partnerItem('{{ $p->slug }}')" style="cursor:pointer;">
									<img src="{{ asset('styling/img/blank.png') }}" data-src="{!! $p_img !!}" class="lazy" alt="{!! $p->outputTranslate('alt_image', session('locale')) !!}">
								</div>
							@endforeach
						</div>
						@endif
						</div>
					@endforeach
				</div>
			</div>
			<div class="other-info">
				<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>
	</section>
</main>

@stop