@extends('dev.layout')
@section('content')

	<!-- Header -->
	<header class="home-header">
		<video loop autoplay muted>
			<source src="video/{{@optional($home)->home_video}}" type="video/mp4">
		</video>

		<div class="overlay">
			<section>
				@php
				$arr = explode(" ", @optional($home)->trans('home_title'), 2);
				@endphp
				<h1 class="scrolling">{{@$arr[0]}} <span>{{@$arr[1]}}</span></h1>
				<p class="scrolling">{{ @optional($home)->trans('home_sub_title')}}</p>
				<div class="services">
					@foreach ($icon->where('section','Home') as $item)
					<img class="scrolling" src="img/{{$item->icon_name}}">
					@endforeach
				</div>
			</section>
		</div>
	</header>

	<!-- About Section -->
	<div class="about scrolling">
		<div class="container">
			<div class="row align-items-center">
				<div class="col-md-8">
					 <p>{{@optional($home)->trans('intro_content')}}</p> 
					<a href={{@optional($home)->intro_more??'#'}}>@lang('header.more')</a>
				</div>
				<div class="col-md-4">
					<img src="img/{{@optional($home)->intro_image}}" alt="About Hmaserv">
				</div>
			</div>
		</div>
	</div>

	<!-- Our Services Section -->
	<div class="services" id="services">
		<h1 class="title text-uppercase">@lang('header.our_services')</h1>
		<div class="container">
			@php
			$isLeft =\App::getLocale()=='en'?true:false;
			@endphp
		@foreach ($ourServices as $item)
		@php
		$arr = explode(" ", $item->trans('service_title'), 2);
		if($isLeft){$st=1;$sec=2;}else {$st=2;$sec=1;}
		@endphp
		<div class="single-service scrolling">
			<div class="row align-items-center">
			<div class="col-md-6 order-md-{{$st}}">
					<h3><span>{{@$arr[0]}}</span> {{@$arr[1]}}</h3>
					<p>
					{{$item->trans('service_content')}}
					</p>
					<div class="tech">
						{{$item->service_platforms}}
					</div>
					<div class="languages">
						@foreach ($icon->where('section',$item->service_title_en) as $ico)
						<img src="img/{{$ico->icon_name}}">
						@endforeach
					</div>
				</div>
				<div class="col-md-6 order-md-{{$sec}}">
					<img src="img/{{$item->service_image}}" alt="Web Development">
				</div>
			</div>
		</div>
		@php
        	$isLeft = !$isLeft;
		@endphp
		@endforeach	
		</div>
	</div>

	<!-- Clients Section -->
	<div class="clients scrolling" id="clients">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2007.463 462.193">
			<path class="a" d="M5266.04,3878.232S3727.887,4026.709,3308.078,3694.12"
				transform="translate(-3761.045 -2893.695) rotate(-8)" />
		</svg>

		<div class="container">
			<div class="title text-uppercase">@lang('header.clients')
				<hr>
			</div>

			<div class="wrapper">
				<div class="scroller">
					<ul class="nav nav-tabs justify-content-md-center" id="myTab" role="tablist">
						<li class="nav-item">
							<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home"
								aria-selected="true">@lang('header.web_development')</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile"
								aria-selected="false">@lang('header.mobile_development')</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact"
								aria-selected="false">@lang('header.design')</a>
						</li>
					</ul>
				</div>
				<div class="tab-content" id="myTabContent">
					<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
						<div class="works">
							@foreach ($clients->where('service_type','Web Development') as $item)
							<div class="single-work">
								<a href="#" class="model">
									<img src="img/{{$item->client_image}}" alt="{{$item->client_name}}">
									<h3>{{$item->client_name}}</h3>
								</a>
							</div>
							@endforeach
						</div>
					</div>
					<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
						<div class="works">
							@foreach ($clients->where('service_type','Mobile Development') as $item)
							<div class="single-work">
								<a href="#" class="model">
									<img src="img/{{$item->client_image}}" alt="{{$item->client_name}}">
									<h3>{{$item->client_name}}</h3>
								</a>
							</div>
							@endforeach
						</div>
					</div>
					<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
						<div class="works">
							@foreach ($clients->where('service_type','Design') as $item)
							<div class="single-work">
								<a href="#" class="model">
									<img src="img/{{$item->client_image}}" alt="{{$item->client_name}}">
									<h3>{{$item->client_name}}</h3>
								</a>
							</div>
							@endforeach
						</div>
					</div>
				</div>

				<hr>
			</div>
		</div>
	</div>

	<!-- Contact Section -->
	<div class="contact scrolling">
		<div class="container">
			<div class="title">
				<h4>@lang('header.do_you_need')<span>@lang('header.project')</span></h4>
				<h1>@lang('header.contact_us_now')</h1>

				<div class="row justify-content-center">
					<div class="col-md-6">
						<form action="{{route('send.mail')}}" method="POST">
							@csrf
							<input type="text" name="name" id="name" placeholder="@lang('header.name')">
							<input type="email" name="email" id="email" placeholder="@lang('header.email')">
							<input type="text" name="subject" id="subject" placeholder="@lang('header.subject')">
							<select name="service_type">
								<option value="Web Development">@lang('header.web_development')</option>
								<option value="Mobile Development">@lang('header.mobile_development')</option>
								<option value="Design">@lang('header.design')</option>
							</select>

							<textarea name="message" id="message" placeholder="@lang('header.message')"></textarea>

							<button class="submit" type="submit">@lang('header.send')</button>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>

@endsection