@extends('front.layout.app')

@section('seo_title')
{{ $service_detail->seo_title }}
@endsection
@section('seo_meta_description')
{{ $service_detail->seo_meta_description }}
@endsection

@section('main_content')

<!-- Breadcrumb -->
<div class="breadcrumbs overlay" style="background-image:url('{{ asset('uploads/' . ($service_detail->service_banner)) }}'">
<div class="container">
<div class="row">
<div class="col-12">
<div class="bread-inner">
<!-- Bread Menu -->
<div class="bread-menu">
<ul>
	<li><a href="{{ route('home') }}">Home</a></li>
	<li><a href="{{ route('service_all') }}">{{ $page_data->service_banner_navtext }}</a></li>
	<li><a href="{{ route('service_details',$service_detail->slug) }}">{{ $service_detail->card_title }}</a></li>
</ul>
</div>
<!-- Bread Title -->
<div class="bread-title"><h2>{{ $service_detail->card_title }}</h2></div>
</div>
</div>
</div>
</div>
</div>
<!-- / End Breadcrumb -->

<!-- Service Single -->
<section class="service-single section-space">
<div class="container">
<div class="row">

<div class="col-lg-8 col-12">
<!-- Service Image  -->

<div class="service-img">
 <img src="{{ asset('uploads/' . ($service_detail->service_image ?: $service_detail->card_image)) }}" alt="">

</div>


<!-- Service Content -->
<div class="service-content">
<p>{!! $service_detail->service_description !!}</p>
<div class="row service-space">
<div class="col-lg-6 col-md-6 col-12">
	<!-- Service Feature -->
	<div class="small-list-feature">
		<p>{!! $service_detail->service_video_description !!}</p>
		@php
    $video_list_items = explode("\n", $service_detail->service_video_lists);
  @endphp
		<ul>
			@foreach ($video_list_items as $item)
			<li><i class="fa fa-check"></i>{!! $item !!}</li>			
			@endforeach
		</ul>
	</div>
</div>


<div class="col-lg-6 col-md-6 col-12">
	<!-- Service Img -->
	<div class="modern-img-feature">
		@if ($service_detail->service_video_image)
			<img src="{{ asset('uploads/' . $service_detail->service_video_image) }}" alt="#">			
		@endif
		
		@if ($service_detail->service_video_url)
		<div class="video-play">
			<a href="{{ $service_detail->service_video_url?:'#' }}" class="video video-popup mfp-iframe"><i class="fa fa-play"></i></a>
		</div>				
		@endif
		
	</div>
</div>
</div>
<p>{!! $service_detail->service_bottom_description !!}</p>
</div>
</div>


<div class="col-lg-4 col-12">
<!-- Service Sidebar -->
<div class="service-sidebar">	
<!-- Single Sidebar -->
<div class="service-single-sidebar widget">
<h2 class="widget-title">Service Menu</h2>
<div class="menu-service-menu-container">
	<!-- Service Menu -->
	<ul id="menu-service-menu" class="menu">
		@foreach ($service_details as $item)
		<li class="active"><a href="{{ route('service_details',$item->slug) }}">{{ $item->card_title }}</a></li>				
		@endforeach
	</ul>
</div>
</div>



<!-- Single Sidebar -->
<div class="service-single-sidebar widget">
<h2 class="widget-title">Fill the form</h2>
<div class="contact-form-area service">
	<!-- Service Form -->
	<form class="form" method="POST" action="{{ route('service_contact_store') }}">
		@csrf
		<div class="row">
			<div class="col-12">
				<div class="form-group">
					<div class="icon"><i class="fa fa-user"></i></div>
					<input type="text" name="name" placeholder="Full Name">
				</div>
			</div>
			<div class="col-12">
				<div class="form-group">
					<div class="icon"><i class="fa fa-envelope"></i></div>
					<input type="email" name="email" placeholder="Your Email">
				</div>
			</div>
					<div class="col-12">
						<div class="form-group">
					<div class="icon"><i class="fa fa-tag"></i></div>
					<input type="text" name="subject" placeholder="Type Subject">
						</div>
					</div>
					<div class="col-12">
				<div class="form-group">
					<div class="icon"><i class="fa fa-pencil"></i></div>
					<textarea type="textarea" rows="5" name="message"></textarea>
				</div>
					</div>
					<input type="hidden" name="category" value="service">
					<div class="col-12">
				<div class="form-group button">
					<button type="submit" class="bizwheel-btn theme-2">Send Now</button>
				</div>
					</div>
		</div>
	</form>
	<!--/ End Service Form -->
</div>
</div>

</div>
<!--/ End Service Sidebar -->
</div>
</div>
</div>
</section>	
<!--/ End Services -->

@endsection