@extends('layouts.front')

@section('content')

 <section class="inner-area parallax-bg" data-background="{{asset('front/images/FnA_HD.jpg')}}" data-type="parallax" data-speed="3">
    <div class="container">
      <div class="section-content">
        <div class="row">
          <div class="col-12">
            <h4>{{$event->title}}</h4>
            <p>Careers <a href="#">{{$event->title}}</a></p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="blog-section">
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-lg-9">
                <div class="blog-details">
                    <div class="details-thumb">
                        <img src="{{asset($event->image)}}" alt="">
                    </div>
                    <div class="details-content mb-40">
                        <h4>{{$event->title}}</h4>
                        <p class="mb-20">{!! $event->content !!}</p>
                    </div>

                    <div class="a2a_kit a2a_kit_size_32 a2a_default_style">
                        <span class="share">Share To Facebook</span>
                        <a class="a2a_button_facebook"></a>
                        
                    </div>

                    <!-- Blog Post Author -->
                </div>
            </div>
            

            <!-- AddToAny BEGIN -->
            
            
            <!-- AddToAny END -->
        </div>
    </div>
</section>

<section class="slider-wrapper p-0">
    <div id="slider-style-one" class="carousel slide bs-slider control-round indicators-line" data-ride="carousel" data-pause="hover" data-interval="5000" style="margin: auto;width: 40%;margin-bottom: 35px;">

        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#slider-style-one" data-slide-to="0" class="active"></li>
            <li data-target="#slider-style-one" data-slide-to="1"></li>
            <li data-target="#slider-style-one" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper For Slides -->
        <div class="carousel-inner" role="listbox">
            
            <!-- Third Slide -->
            <!-- <div class="carousel-item active"> -->

                <!-- Slide Background -->
                <!-- <img src="{{asset('front/images/slider/1.jpg')}}" alt="Slider Images"  class="slide-image"/>
                <div class="bs-slider-overlay"></div>

                <div class="container">
                    <div class="row"> -->
                        <!-- Slide Text Layer -->
                        <!-- <div class="slide-text slide-style-left">
                            <div class="sub-title">
                                <h4>we provide</h4>
                            </div>
                            <div class="title-box">
                                <h2>We are the best industrial company <br> in the world </h2>
                            </div>
                            <div class="btn-box">
                                <a href="#" class="btn-theme">Read more</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div> -->
            <!-- End of Slide -->
            
            <!-- Third Slide -->
            @foreach($event->images as $one_image)
            <div class="carousel-item @if($loop->first) active @endif">
                <!-- Slide Background -->
                <img src="{{asset($one_image->image)}}" alt="Slider Images" style="max-height: 300px;"  class="slide-image"/>
                <div class="bs-slider-overlay"></div>
            </div>
            @endforeach
            <!-- End of Slide -->
            
            <!-- Third Slide -->
            
            <!-- End of Slide -->

        </div><!-- End of Wrapper For Slides -->

        <!-- Left Control -->
        <a class="left carousel-control" href="#slider-style-one" role="button" data-slide="prev">
            <span class="fa fa-angle-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>

        <!-- Right Control -->
        <a class="right carousel-control" href="#slider-style-one" role="button" data-slide="next">
            <span class="fa fa-angle-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>

    </div> <!-- End  slider-style-one Slider -->
</section>
@endsection

@section('scripts')
<script async src="https://static.addtoany.com/menu/page.js"></script>
<script type="text/javascript">
    var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";
</script>
@endsection