@extends('front.template.master')
@section('title', 'Home')
@section('content')

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
{!! NoCaptcha::renderJs() !!}
	 
<style>
    [data-secondary-overlay]:before {
      background-color: #031b38;
    }
    
    .modal-video{
        display: none !important;
    }
    
    .nice-select{
        margin-bottom: 20px;
    }
</style>

    <!-- Breadcrumb -->
    <!--<div class="breadcrumb-area" data-bgimage="{{ asset('public/front/images/bg/breadcrumb-bg-1.jpg') }}" data-black-overlay="4">-->
    <!--    <div class="container">-->
    <!--        <div class="in-breadcrumb">-->
    <!--            <div class="row align-items-center">-->
    <!--                <div class="col">-->
    <!--                    <ul>-->
    <!--                        <li><a href="{{ route('home') }}">Home</a></li>-->
    <!--                        <li>About Us</li>-->
    <!--                    </ul>-->
    <!--                </div>-->
    <!--                <div class="col">-->
    <!--                    <h6>About Us</h6>-->
    <!--                </div>-->
    <!--            </div>-->
    <!--        </div>-->
    <!--    </div>-->
    <!--</div>-->
    <!--// Breadcrumb -->

    <!-- Page Conttent -->
    <main class="page-content">

        <!-- Features Area -->
		<!--<div class="features-area in-section section-padding-md bg-white">-->
		<!--	<div class="container">-->
		<!--		<div class="row features-wrapper">-->
		<!--			<div class="col-lg-4 col-md-6 col-12">-->
		<!--				<div class="in-feature">-->
		<!--					<span class="in-feature-icon">-->
		<!--						<i class="flaticon-lock"></i>-->
		<!--					</span>-->
		<!--					<h4>Secure Account With Gurantee</h4>-->
		<!--					<p>Do eiusmod tempor incididunt ut labore et dolore masit amet.</p>-->
		<!--				</div>-->
		<!--			</div>-->
		<!--			<div class="col-lg-4 col-md-6 col-12">-->
		<!--				<div class="in-feature">-->
		<!--					<span class="in-feature-icon">-->
		<!--						<i class="flaticon-lab"></i>-->
		<!--					</span>-->
		<!--					<h4>{{ $about->exp_year }} Years Of Experience</h4>-->
		<!--					<p>Do eiusmod tempor incididunt ut labore et dolore masit amet.</p>-->
		<!--				</div>-->
		<!--			</div>-->
		<!--			<div class="col-lg-4 col-md-6 col-12">-->
		<!--				<div class="in-feature">-->
		<!--					<span class="in-feature-icon">-->
		<!--						<i class="flaticon-partner"></i>-->
		<!--					</span>-->
		<!--					<h4>Dedicated Team With Strong Skill</h4>-->
		<!--					<p>Do eiusmod tempor incididunt ut labore et dolore masit amet.</p>-->
		<!--				</div>-->
		<!--			</div>-->
		<!--		</div>-->
		<!--	</div>-->
		<!--</div>-->
		<!--// Features Area -->
    
        <!-- About Area -->
		<div class="about-area in-section section-padding-bottom-lg bg-white pb-0" style="margin-top: 50px;">
			<div class="container custom-container">
				<div class="row gx-0">
					<div class="col-xl-6 col-lg-12">
						<div class="about-content heightmatch">
							<h6>ABOUT US </h6>
														<!--<a href="#" class="in-button">ABOUT US</a>-->
						</div>
					</div>
					<div class="col-xl-6 col-lg-6">
						<div class="heightmatch">
							<div class="in-videobox">
								<img src="{{ asset('public/front/images/other/videbox-image-1.jpg') }}" alt="man with umbrella">
								<a href="#" data-bs-toggle="modal" data-bs-target="#exampleModal" class="in-videobutton in-videobox-button"><i class="zmdi zmdi-play"></i></a>
							</div>
						</div>
					</div>
					<div class="col-xl-12 col-lg-12 mt-5">
					    					</div>
				</div>
				
				<!-- Callback Area -->
                <div class="testimonial-area-two in-section section-padding-lg bg-image-4" data-secondary-overlay="9" style="padding-bottom: 200px;">
                    <div class="container">
                        <div class="section-title text-center">
        					<h2 class="text-light">Our Teams</h2>
                           <!-- <div class=" row testimonial-slider-2 in-slidearrow-1">-->
                           <!--     @foreach($testimonials as $testimonial)-->
                           <!--         <div class="slider-item">-->
                                        <!-- Single Testimonial -->
                           <!--             <div class="testimonial">-->
                           <!--                 <div class="testimonial-header">-->
                           <!--                     <div class="testimonial-image">-->
                           <!--                         @if($testimonial->image)-->
                           <!-- 					        <img src="{{ env('APP_URL')}}/storage/app/public/testimonial/{{ trim($testimonial->image) }}">-->
                           <!-- 					    @else-->
                           <!-- 						    <img src="{{ asset('public/front/images/testimonial/testimonial-author-1.png') }}" alt="testimonial author">-->
                           <!-- 						@endif-->
                           <!--                     </div>-->
                           <!--                     <span><img src="{{ asset('public/front/images/icons/title-bottom-shape.png') }}" alt="shape"></span>-->
                           <!--                 </div>-->
                           <!--                 <div class="testimonial-content">-->
                           <!--                     <p>{{ $testimonial->short_description }}</p>-->
                    							<!--<h5>{{ $testimonial->name }}</h5>-->
                    							<!--<h6>{{ $testimonial->designation }}</h6>-->
                           <!--                 </div>-->
                           <!--                 <ul class="testimonial-socialicons">-->
                           <!--                     <li><a href="{{ $testimonial->facebook_url }}"><i class="zmdi zmdi-facebook"></i></a></li>-->
                    							<!--<li><a href="{{ $testimonial->twitter_url }}"><i class="zmdi zmdi-twitter"></i></a></li>-->
                    							<!--<li><a href="{{ $testimonial->linkedin_url }}"><i class="zmdi zmdi-linkedin"></i></a></li>-->
                    							<!--<li><a href="{{ $testimonial->instagram_url }}"><i class="zmdi zmdi-instagram"></i></a></li>-->
                           <!--                 </ul>-->
                           <!--             </div>-->
                                        <!--// Single Testimonial -->
                           <!--         </div>-->
                           <!--     @endforeach-->
                           <!-- </div>-->
                        </div>
                    </div>
                </div>
                <!--// Callback Area -->
				
				<!-- Team Members -->
                <div class="team-members-area in-section bg-white section-padding-bottom-lg pb-0">
                    <div class="container">
                        <div class="team-member-slider in-slidearrow-2">
                            @foreach($teams as $team)
                                <div class="team-member-slider-item">
                                    <!-- Single Team Member -->
                                    <div class="in-member">
                                        <div class="in-member-image" style="background: #bdbdbd;">
                                            @if($team->image)
                    					        <img src="{{ env('APP_URL')}}/storage/app/public/team/{{ trim($team->image) }}" style="height: 280px;">
                    					    @else
                    						    <img src="{{ asset('public/front/images/team/team-member-1.jpg') }}" alt="team member">
                    						@endif
                                        </div>
                                        <div class="in-member-content">
                                            <ul class="in-member-social">
                                                <li><a href="{{ $team->facebook_url }}"><i class="zmdi zmdi-facebook"></i></a></li>
                    							<li><a href="{{ $team->twitter_url }}"><i class="zmdi zmdi-twitter"></i></a></li>
                    							<li><a href="{{ $team->linkedin_url }}"><i class="zmdi zmdi-linkedin"></i></a></li>
                    							<li><a href="{{ $team->instagram_url }}"><i class="zmdi zmdi-instagram"></i></a></li>
                                            </ul>
                                            <h5>{{ $team->name }}</h5>
                                            <h6>{{ $team->designation }}</h6>
                                            <p>
                                                {{ str_limit(strip_tags(html_entity_decode($team->short_description)), $limit = 200, $end = '') }}
                                                @if($team->short_description)
                                                    <a href="#" data-bs-toggle="modal" data-bs-target="#team{{ $team->id }}">...</a>
                                                @endif
                                            </p>
                                        </div>
                                    </div>
                                    <!--// Single Team Member -->
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
                <!--// Team Members -->
				
				<div class="row gx-0">	
					<!--<div class="col-xl-6 col-lg-6">-->
					<!--	<div class="counterbox heightmatch" data-bgimage="assets/images/other/counterbox-bg.jpg" data-secondary-overlay="9">-->
					<!--		<div class="counterbox-inner">-->
					<!--			<div class="counterbox-block">-->
					<!--				<div class="counterbox-blockinner">-->
					<!--					<h2><span class="counter">{{ $about->satisfaction }}</span>%</h2>-->
					<!--					<h6>Satisfaction</h6>-->
					<!--				</div>-->
					<!--			</div>-->
					<!--			<div class="counterbox-block">-->
					<!--				<div class="counterbox-blockinner">-->
					<!--					<h2><span class="counter">{{ $about->new_client }}</span></h2>-->
					<!--					<h6>New Client</h6>-->
					<!--				</div>-->
					<!--			</div>-->
					<!--			<div class="counterbox-block">-->
					<!--				<div class="counterbox-blockinner">-->
					<!--					<h2><span class="counter">{{ $about->satisfaction }}</span>%</h2>-->
					<!--					<h6>Satisfaction</h6>-->
					<!--				</div>-->
					<!--			</div>-->
					<!--			<div class="counterbox-block">-->
					<!--				<div class="counterbox-blockinner">-->
					<!--					<h2><span class="counter">{{ $about->new_project }}</span></h2>-->
					<!--					<h6>New Project</h6>-->
					<!--				</div>-->
					<!--			</div>-->
					<!--		</div>-->
					<!--	</div>-->
					<!--</div>-->
					<div class="col-xl-12 col-lg-12">
						<div class="insurencebox heightmatch">
							<h4>Request a free call back</h4>
							<h2>Have a life to protect?</h2>
							@include('admin.partials.flash_message')
                            <form action="{{ route('contactForm') }}" method="post" class="insurencebox-form">
                                @csrf
								<input type="text" name="first_name" placeholder="First Name *">
								<input type="text" name="last_name" placeholder="Last Name *">
								<input type="text" name="email" placeholder="Email *">
								<input type="text" name="contact" placeholder="Phone *">
								<select name="message">
								    @foreach($services as $service)
									    <option value="{{ $service->title }}">{{ $service->title }}</option>
									@endforeach
								</select>
							
                                {!! app('captcha')->display() !!}
                                @if ($errors->has('g-recaptcha-response'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('g-recaptcha-response') }}</strong>
                                    </span>
                                @endif
								<button type="submit" class="in-button" style="margin-top:95px;">Submit</button>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--// About Area -->

    </main>
    <!--// Page Conttent -->
    
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <video style="width: 100%; height: auto;" controls>
		  <source src="{{ env('APP_URL')}}/storage/app/public/cms/{{ $about->video }}" type="video/mp4">
		</video>
      </div>
    </div>
  </div>
</div>

@foreach($teams as $team)
    <div class="modal fade" id="team{{ $team->id }}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">{{ $team->name }}</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            {{ $team->short_description }}
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
@endforeach

@endsection