@extends('frontend.layouts.app')
@section('content')
	<main class="page_main_layout proServices_page">
		<section class="innerPageBanner ServicesPageBnr proServicesPageBnr">
			<div class="container">
				<div class="contentWrapper__wr wow animate__zoomIn" data-wow-duration="2s">
					<p class="bannerTitle__wr" title="PRO Services in Dubai">PRO Services</p>
					<ol class="breadcrumb__wr">
						<li><a href="index.php" title="Takhlees-Home">Home</a></li>
						<li><a href="javascript:void(0);" title="Takhlees-Services">Services</a></li>
						<li title="PRO Services in Dubai">PRO Services</li>
					</ol>
				</div>
			</div>
		</section>
		<section class="serviceDetailSec__wr">
			<div class="container">
				<div class="row">
					<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
						<div class="serTabList__wr">
							<div class="owl-carousel owl-theme serTabSlider">
								@if (page_content('sec_one_tab_label') != null)
                                    @foreach (json_decode(page_content('sec_one_tab_label', null, $lang), true) as $key => $value)
										<div class="item"><button data-id="id_{{ $key }}" class="tabBtn__wr {{ $key == 0 ? 'active' : '' }}" title="{{ $value }}">{{ $value }}<div class="horiSelector"><span class="left"></span><span class="right"></span></div></button></div>
									@endforeach
								@endif
								{{-- <div class="item"><button data-id="immigrationCard" class="tabBtn__wr" title="Immigration Card Renewal">Immigration Card Renewal<div class="horiSelector"><span class="left"></span><span class="right"></span></div></button></div>
								<div class="item"><button data-id="idCardReg" class="tabBtn__wr" title="UAE ID card registration">UAE ID card registration<div class="horiSelector"><span class="left"></span><span class="right"></span></div></button></div>
								<div class="item"><button data-id="labourCard" class="tabBtn__wr" title="Labour Card Renewal">Labour Card Renewal<div class="horiSelector"><span class="left"></span><span class="right"></span></div></button></div>
								<div class="item"><button data-id="visaStamp" class="tabBtn__wr" title="Visa Stamping">Visa Stamping<div class="horiSelector"><span class="left"></span><span class="right"></span></div></button></div>
								<div class="item"><button data-id="visaCancel" class="tabBtn__wr" title="Visa Cancellation">Visa Cancellation<div class="horiSelector"><span class="left"></span><span class="right"></span></div></button></div>
								<div class="item"><button data-id="driveLicense" class="tabBtn__wr" title="Obtaining driving license in UAE">Obtaining driving license in UAE<div class="horiSelector"><span class="left"></span><span class="right"></span></div></button></div>
								<div class="item"><button data-id="renewDriveLicense" class="tabBtn__wr" title="Renew your driving license in Dubai">Renew your driving license in Dubai<div class="horiSelector"><span class="left"></span><span class="right"></span></div></button></div>
								<div class="item"><button data-id="processApplicants" class="tabBtn__wr" title="We also process applicants for the following">Process Applicants<div class="horiSelector"><span class="left"></span><span class="right"></span></div></button></div>
								<div class="item"><button data-id="followServices" class="tabBtn__wr" title="We provide the following services">Following Services<div class="horiSelector"><span class="left"></span><span class="right"></span></div></button></div> --}}
							</div>
						</div>
					</div>
					<div class="col-xl-8 col-lg-8 col-md-12 col-sm-12 col-12">
						<div class="contentWrap__wr wow animate__fadeInLeft" data-wow-duration="2s">
							@if (page_content('sec_one_tab_label') != null)
								@foreach (json_decode(page_content('sec_one_tab_label', null, $lang), true) as $key => $value)
									<div class="serviceItem__wr {{ $key == 0 ? 'active fades' : '' }}" id="id_{{ $key }}">
										<div class="secTitle__wr">
											<p class="title__wr">
												@if (json_decode(page_content('sec_one_tab_data_title'), true) != null)
													{{ json_decode(page_content('sec_one_tab_data_title'), true)[$key] }}
												@endif
											</p>
										</div>
										@if(json_decode(page_content('sec_one_tab_data_img'), true) != null)
											<picture class="img__wr">
												<img src="{{static_asset('assets/frontend/images/pro-service-license-bg.jpg')}}" loading="lazy" class="img-fluid" alt="pro-service-license-bg" title="pro-service-license-bg" width="575" height="395">
											</picture>
										@endif
										@if (json_decode(page_content('sec_one_tab_data_desc'), true) != null)
											{!! json_decode(page_content('sec_one_tab_data_desc', null, $lang), true)[$key] !!}
										@endif
										<!-- <p><strong>LAST UPDATED:-</strong>&nbsp;&nbsp;<span>({{ date('M Y', strtotime(json_decode(page_content('sec_one_tab_data_last_update'), true)[$key])) }})</span></p> -->
										</div>
								@endforeach
							@endif
						</div>
					</div>
					@include('frontend.inc.get_in_touch')
				</div>
			</div>
		</section>
		<section class="callStrapSec__wr">
			<div class="container">
				<div class="contentWrap__wr">
					<div class="callBtn__wr wow animate__heartBeat" data-wow-duration="2s"><a href="tel:+971509886666" title="+971509886666"><i class="fa-solid fa-phone"></i></a></div>
					<p class="title__wr">{{ page_content('proser_sec_tow_title', null, $lang) }}</p>
					<p class="callTitle wow animate__fadeInUp" data-wow-duration="2s">{{ page_content('proser_sec_tow_sectitle', null, $lang) }} <a href="{{ page_content('proser_sec_tow_subtitle_link', null, $lang) }}" title="{{ page_content('proser_sec_tow_subtitle_link', null, $lang) }}">{{ page_content('proser_sec_tow_contact_no', null, $lang) }}</a></p>
				</div>
			</div>
		</section>
		
		<section class="allServicesSec__wr">
			<div class="container">
				<div class="secTitle__wr">
					<p class="title__wr">{{ page_content('proser_sec_three_title', null, $lang) }}</p>
				</div>
				<div class="row">
					@if($services_cards->isNotEmpty())
						@foreach ($services_cards as $service_card)
							<div class="item__wr col-xl-4 col-lg-4 col-md-6 col-sm-6 col-6 wow animate__zoomIn" data-wow-duration="2s">
								<a href="{{route('service-custom', $service_card->slug)}}">
									<span class="BorderVr__wr"></span>
									<span class="BorderHr__wr"></span>
									<span class="OverlayLeft__wr"></span>
									<span class="OverlayRight__wr"></span>
									<span class="icon__wr" title="Ejari"><img src="{{ uploaded_asset($service_card->icon) }}" loading="lazy" class="imgsvg"></span>
									<div class="content__wr">
										<p class="title__wr" title="Ejari">{{ $service_card->getTranslation('title') }}</p>
									</div>
								</a>
							</div>
						@endforeach
					@endif
				</div>
			</div>
		</section>
	</main>
@endsection