@extends('front.layout.app')

@section('seo_title')
{{ $page_two_data->about_seo_title }}
@endsection

@section('seo_meta_description')
{{ $page_two_data->about_seo_meta_description }}
@endsection

@section('main_content')

<!-- Breadcrumb -->
<div class="breadcrumbs overlay" style="background-image:url('{{ asset('uploads/' . $page_two_data->about_banner_background) }}')">
<div class="container">
<div class="row">
<div class="col-12">
<div class="bread-inner">
<div class="bread-menu">
<ul>
<li><a href="{{ route('home') }}">Home</a></li>
<li><a href="{{ route('about_show_home') }}">{{ $page_two_data->about_banner_navtext }}</a></li>
</ul>
</div>
<div class="bread-title"><h2>{{ $page_two_data->about_banner_title }}</h2></div>
</div>
</div>
</div>
</div>
</div>

<!-- About Us -->
<section class="about-us section-space">
<div class="container">
<div class="row">
<div class="col-lg-5 offset-lg-1 col-md-6 col-12">
<div class="modern-img-feature">
<img src="{{ asset('uploads/' . $page_two_data->about_video_background) }}" alt="About">

@isset($page_two_data->about_video_url)
	<div class="video-play">
<a href="{{ $page_two_data->about_video_url }}" class="video video-popup mfp-iframe">
<i class="fa fa-play"></i>
</a>
</div>	
@endisset

</div>
</div>
<div class="col-lg-5 col-md-6 col-12">
<div class="about-content section-title default text-left">
<div class="section-top">
<h1>
@isset($page_two_data->about_title_highlight)
<span>{{ $page_two_data->about_title_highlight }}</span>
@endisset
<b>{{ $page_two_data->about_title }}</b>
</h1>
</div>
<div class="section-bottom">
<div class="text">
{!! $page_two_data->about_text !!}
</div>
@if($page_two_data->about_button)
<div class="button">
<a href="{{ $page_two_data->about_button_url?:'#' }}" class="bizwheel-btn theme-2">{{ $page_two_data->about_button }}<i class="fa fa-angle-right"></i></a>
</div>
@endif
</div>
</div>
</div>
</div>
</div>
</section>

<!-- Skills -->
<section class="skill-area section-space" style="background-image:url('{{ asset('uploads/' . $page_two_data->skills_background_image) }}')">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-8 col-12">
<div class="section-title default text-left">
<div class="section-top">
<h1>
@isset($page_two_data->skills_title_highlight)
<span>{{ $page_two_data->skills_title_highlight }}</span>
@endisset
<b>{{ $page_two_data->skills_title }}</b>
</h1>
</div>
<div class="section-bottom">
<div class="text">
{!! $page_two_data->skills_text !!}
</div>
</div>
</div>

<div class="skill-main">
@for ($i = 1; $i <= 6; $i++)
@php
$text = 'skill' . $i . '_text';
$percent = 'skill' . $i . '_percentage';
@endphp

@if (isset($page_two_data->$text) && isset($page_two_data->$percent))
<div class="single-skill">
	<div class="skill-info">
					<h4>{{ $page_two_data->$text }}</h4>
	</div>
	<div class="progress">
					<div class="progress-bar" role="progressbar" aria-valuenow="{{ $page_two_data->$percent }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ $page_two_data->$percent }}%;">
									<span class="percent">{{ $page_two_data->$percent }}%</span>
					</div>
	</div>
</div>
@endif
@endfor
</div>
</div>
</div>
</div>
</section>

@endsection