@extends('front.frontLayout')
@section('title','Home')
@section('pagelevelcss')
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css" rel="stylesheet">
@stop
@section('content')
<section class="banner-section home-banner ">
   <div class="owl-carousel" id="home-slider">
      @if(count($banners) > 0)
         @foreach($banners as $value)
            <div class="item">
               <div class="text">
                  <h1 class="main-title">{{ $value->title }}</h1>
                  {!! $value->description !!}
                  @if(isset($value->button_label) && (isset($value->mobile) || isset($value->button_url)))
                     @if($value->type == 'mobile')
                        <a href="tell:{{ $value->mobile }}" id="order-test" class="custom-btn">{{ $value->button_label }}</a>
                     @else
                        <a href="{{ $value->button_url }}" target="_blank" id="order-test" class="custom-btn">{{ $value->button_label }}</a>
                     @endif
                  @endif
               </div>
               <img src="{{ asset('uploads/'.$value->image) }}" />
            </div>
         @endforeach
      @endif
   </div>
</section>
<section id="popular-test" class="">
   <ul class="nav nav-tabs py-4 " role="tablist">
   	<li class="nav-item">
   		<a class="nav-link active" data-toggle="tab" href="#tabs-1" role="tab">
            <span class="icon-img">
               <img src="{{ asset('frontend/images/all.png') }}">
            </span>
            <span class="icon-text"> ALL</span>
         </a>
   	</li>
      @foreach($package_category as $value)
         <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#tabs-{{ ($value->id + 1) }}" role="tab">
               <span class="icon-img">
                  <img src="{{ asset('uploads/'.$value->image) }}">
               </span>
               <span class="icon-text">{{ $value->name }}</span>
            </a>
         </li>
      @endforeach
      <li class="nav-item">
         <a class="nav-link" data-toggle="tab" href="#tabs-7" role="tab">
            <span class="icon-img">
               <img src="{{ asset('frontend/images/icon_coronavirus_cat.png') }}">
            </span>
            <span class="icon-text">Covid</span>
         </a>
      </li>
   </ul><!-- Tab panes -->
   <div class="tab-content">
      <div class="tab-pane active" id="tabs-1" role="tabpanel">
         <div class="owl-carousel tab-slider-sec" id="tab-slider">
            @if(count($packages) > 0)
               @foreach($packages as $value)
                  <div class="item section-padding">
                     <div class="container row">
                        <div class="col-md-6"> 
                           <img src="{{ asset('uploads/'.$value->package_image) }}" />
                        </div>
                        <div class="col-md-6">
                           <div class="tab-slider-text">
                              <h1>{{ $value->name }}</h1>
                              <p>{{ $value->short_description }}</p>
                              <a href="{{ route('test.detail', ['name_url' => $value->name_url]) }}" title="" class="custom-btn ">Read More</a>
                           </div>
                        </div>
                     </div>
                  </div>
               @endforeach
            @endif
            <div class="item section-padding">
               <div class="container row">
                  <div class="col-md-6"> 
                     <img src="{{ asset('frontend/images/rt-pcr.jpg') }}" />
                  </div>
                  <div class="col-md-6">
                     <div class="tab-slider-text">
                        <h1>RT-PCR</h1>
                        <!-- <p>RT-PCR</p> -->
                        <a href="{{ route('covid') }}" title="" class="custom-btn ">Read More</a>
                     </div>
                  </div>
               </div>
            </div>
            <div class="item section-padding">
               <div class="container row">
                  <div class="col-md-6"> 
                     <img src="{{ asset('frontend/images/rapid-antigen-test.jpg') }}" />
                  </div>
                  <div class="col-md-6">
                     <div class="tab-slider-text">
                        <h1>Rapid Antigen Test</h1>
                        <!-- <p>Rapid Antigen Test</p> -->
                        <a href="{{ route('covid') }}" title="" class="custom-btn ">Read More</a>
                     </div>
                  </div>
               </div>
            </div>
         </div>
   	</div>
      @if(count($general_health) > 0)
         <div class="tab-pane" id="tabs-2" role="tabpanel">
            <div class="owl-carousel tab-slider-sec" id="tab-slider">
               @foreach($general_health as $value)
                  <div class="item section-padding">
                     <div class="container row">
                        <div class="col-md-6"> 
                           <img src="{{ asset('uploads/'.$value->package_image) }}" />
                        </div>
                        <div class="col-md-6">
                           <div class="tab-slider-text">
                              <h1>{{ $value->name }}</h1>
                              <p>{{ $value->short_description }}</p>
                              <a href="{{ route('test.detail', ['name_url' => $value->name_url]) }}" title="" class="custom-btn ">Read More</a>
                           </div>
                        </div>
                     </div>
                  </div>
               @endforeach
            </div>
         </div>
      @else
         <div class="tab-pane test-no-data-available" id="tabs-2" role="tabpanel">
            <p>No data available.</p>
         </div>
      @endif
      @if(count($heart_health) > 0)
         <div class="tab-pane" id="tabs-3" role="tabpanel">
            <div class="owl-carousel tab-slider-sec" id="tab-slider">
               @foreach($heart_health as $value)
                  <div class="item section-padding">
                     <div class="container row">
                        <div class="col-md-6"> 
                           <img src="{{ asset('uploads/'.$value->package_image) }}" />
                        </div>
                        <div class="col-md-6">
                           <div class="tab-slider-text">
                              <h1>{{ $value->name }}</h1>
                              <p>{{ $value->short_description }}</p>
                              <a href="{{ route('test.detail', ['name_url' => $value->name_url]) }}" title="" class="custom-btn ">Read More</a>
                           </div>
                        </div>
                     </div>
                  </div>
               @endforeach
            </div>
         </div>
      @else
         <div class="tab-pane test-no-data-available" id="tabs-3" role="tabpanel">
            <p>No data available.</p>
         </div>
      @endif
      @if(count($hormone_vitamins) > 0)
         <div class="tab-pane" id="tabs-4" role="tabpanel">
            <div class="owl-carousel tab-slider-sec" id="tab-slider">
               @foreach($hormone_vitamins as $value)
                  <div class="item section-padding">
                     <div class="container row">
                        <div class="col-md-6"> 
                           <img src="{{ asset('uploads/'.$value->package_image) }}" />
                        </div>
                        <div class="col-md-6">
                           <div class="tab-slider-text">
                              <h1>{{ $value->name }}</h1>
                              <p>{{ $value->short_description }}</p>
                              <a href="{{ route('test.detail', ['name_url' => $value->name_url]) }}" title="" class="custom-btn ">Read More</a>
                           </div>
                        </div>
                     </div>
                  </div>
               @endforeach
            </div>
         </div>
      @else
         <div class="tab-pane test-no-data-available" id="tabs-4" role="tabpanel">
            <p>No data available.</p>
         </div>
      @endif
      @if(count($infection_std) > 0)
         <div class="tab-pane" id="tabs-5" role="tabpanel">
            <div class="owl-carousel tab-slider-sec" id="tab-slider">
               @foreach($infection_std as $value)
                  <div class="item section-padding">
                     <div class="container row">
                        <div class="col-md-6"> 
                           <img src="{{ asset('uploads/'.$value->package_image) }}" />
                        </div>
                        <div class="col-md-6">
                           <div class="tab-slider-text">
                              <h1>{{ $value->name }}</h1>
                              <p>{{ $value->short_description }}</p>
                              <a href="{{ route('test.detail', ['name_url' => $value->name_url]) }}" title="" class="custom-btn ">Read More</a>
                           </div>
                        </div>
                     </div>
                  </div>
               @endforeach
            </div>
         </div>
      @else
         <div class="tab-pane test-no-data-available" id="tabs-5" role="tabpanel">
            <p>No data available.</p>
         </div>
      @endif
      @if(count($urine_drug_screen) > 0)
         <div class="tab-pane" id="tabs-6" role="tabpanel">
            <div class="owl-carousel tab-slider-sec" id="tab-slider">
               @foreach($urine_drug_screen as $value)
                  <div class="item section-padding">
                     <div class="container row">
                        <div class="col-md-6"> 
                           <img src="{{ asset('uploads/'.$value->package_image) }}" />
                        </div>
                        <div class="col-md-6">
                           <div class="tab-slider-text">
                              <h1>{{ $value->name }}</h1>
                              <p>{{ $value->short_description }}</p>
                              <a href="{{ route('test.detail', ['name_url' => $value->name_url]) }}" title="" class="custom-btn ">Read More</a>
                           </div>
                        </div>
                     </div>
                  </div>
               @endforeach
            </div>
         </div>
      @else
         <div class="tab-pane test-no-data-available" id="tabs-6" role="tabpanel">
            <p>No data available.</p>
         </div>
      @endif
      <div class="tab-pane covid-panel-home" id="tabs-7" role="tabpanel">
         <div class="owl-carousel tab-slider-sec" id="tab-slider">
            <div class="item section-padding">
               <div class="container row">
                  <div class="col-md-6"> 
                     <img src="{{ asset('frontend/images/rt-pcr.jpg') }}" />
                  </div>
                  <div class="col-md-6">
                     <div class="tab-slider-text">
                        <h1>RT-PCR</h1>
                        <!-- <p>RT-PCR</p> -->
                        <a href="{{ route('covid') }}" title="" class="custom-btn ">Read More</a>
                     </div>
                  </div>
               </div>
            </div>
            <div class="item section-padding">
               <div class="container row">
                  <div class="col-md-6"> 
                     <img src="{{ asset('frontend/images/rapid-antigen-test.jpg') }}" />
                  </div>
                  <div class="col-md-6">
                     <div class="tab-slider-text">
                        <h1>Rapid Antigen Test</h1>
                        <!-- <p>Rapid Antigen Test</p> -->
                        <a href="{{ route('covid') }}" title="" class="custom-btn ">Read More</a>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</section>
<!-- how it works -->
<section class="how-work-section section-padding">
   <div class="container">
      <h2 class="main-title text-center">HOW DOES IT WORK?</h2>
      <div class="row">
         <div class="col-md-6 col-sm-12">
            <div class="how-work-wrap">
               <div class="how-work-steps">
                  <div class="number">
                     <span>1</span>
                  </div>
                  <div class="step-details">
                     <h3 class="main-title"><span> Select your test</span></h3>
                     <p>Choose a specific test or search through our list of categories. Then schedule an appointment with us. We do not bill insurance for Walk-In patients without a physician order.</p>
                     <a href="{{ route('all.tests') }}" class="custom-btn">View All Tests</a>
                  </div>
               </div>
               <div class="how-work-steps">
                  <div class="number">
                     <span>2</span>
                  </div>
                  <div class="step-details">
                     <h3 class="main-title">Visit our location</h3>
                     <p><span>Visit our location and bring a Photo ID and we will get your blood work done.  You may also simply walk in during our normal office hours. </p>
                     <a href="{{ route('all.tests') }}" class="custom-btn reg-btn">View All Tests</a>
                  </div>
               </div>
               <div class="how-work-steps">
                  <div class="number">
                     <span>3</span>
                  </div>
                  <div class="step-details">
                     <h3 class="main-title">Receive your results.</h3>
                     <p>You decide how you receive your lab results. We follow HIPAA guidelines and State regulation regarding how private healthcare information is handled. We can email, Fax or provide you a hard copy upon request.  For results that require immediate attention, we will reach out to you via the number or emial you provide.  </p>
                  </div>
               </div>
            </div>
         </div>
         <div class="col-md-6 col-sm-12">
            <!-- <iframe width="100%" height="100%" src="{{config('app.how_does_it_work')}}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> -->
            <!-- <video width="100%" height="100%" autoplay="true" controls loop="true">
               <source src="{{ asset('frontend/images/9317606-hd.mov') }}" type="video/mp4">
            </video> -->
            <video width="100%" height="100%" loop="true" autoplay="true" controls>
               <source src="{{ asset('frontend/images/9317606-hd.mov') }}" type="video/mp4">
            </video>
         </div>
      </div>
   </div>
</section>
<section class="how-we-sec section-padding" id="how_we_sec">
   <div class="container">
      <h2 class="main-title text-center">How we are different?</h2>
      <div class="row pb-5 mb-2">
         <div class="col-lg-4 col-md-6">
            <div class="count-box">
               <i class="fas fa-user-md"></i>
               <p>Walk-In-Lab</p>
               <p>We are privately owned medical lab that allow you to   walk-in for blood work. Using on-site brand new equipment, we are often able to get results back to  you much more quickly. We are CLIA certified and  all of our  equipment go through rigorous proficiency testing.</p>
            </div>
         </div>
         <div class="col-lg-4 col-md-6 mt-5 mt-md-0">
            <div class="count-box">
               <i class="far fa-hospital"></i>
               <p>Transparent Pricing</p>
               <p>No Healthcare insurance? No problem. We offer transparent pricing, you will know how much each test cost  before any work is done. </p>
            </div>
         </div>
         <div class="col-lg-4 col-md-6 mt-5 mt-lg-0">
            <div class="count-box">
               <i class="fas fa-flask"></i>
               <p>Need Doctor's Order?</p>
               <p>Want to  know what your  cholesterol or Vitamin D levels are without having to go to the doctor’s office? We have conveniently categorized medical lab tests in an easy to understand manner. No Doctor’s order is needed to get blood work done at our lab. </p>
            </div>
         </div>
      </div>
   </div>
</section>
@endsection
@section('pageleveljs')
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
   var video = document.querySelector('video');
   video.muted = true;
   video.play()
})
</script>
@stop