@php 
$galleryImage2= explode(",",$galleryImage->image);
$count = count($galleryImage2);
$img = 0; 
@endphp

@extends('Layouts.web_master')
@section('content')

<section class="ftco-counter ftco-intro" id="section-counter">
  <div class="container">
    <div class="row no-gutters">
      <div class="col-md-5 d-flex justify-content-center counter-wrap ftco-animate">
        <div class="block-18 color-1 align-items-stretch">
          <div class="text">
            <span>Serving Over</span>
            <strong class="number" data-number="41279">0</strong>
            <span>Members of all branches.</span>
          </div>
        </div>
      </div>
      <div class="col-md d-flex justify-content-center counter-wrap ftco-animate">
        <div class="block-18 color-2 align-items-stretch">
          <div class="text">
            <h3 class="mb-4">Annual Reports</h3>
            <p>In order to establish good management in the organization, we publish yearly reports.</p>
            <p><a href="{{url('/')}}" class="btn btn-white px-3 py-2 mt-2">Annual Reports</a></p>
          </div>
        </div>
      </div>
      <div class="col-md d-flex justify-content-center counter-wrap ftco-animate">
        <div class="block-18 color-3 align-items-stretch">
          <div class="text">
            <h3 class="mb-4">Publications</h3>
            <p>In order to establish good management in the organization, we publish yearly reports.</p>
            <p><a href="{{url('/')}}" class="btn btn-white px-3 py-2 mt-2">Publications</a></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

{{-- Start Program --}}
<section class="ftco-section bg-light">
  <div class="container-fluid">
    <div class="row justify-content-center mb-5 pb-3">
      <div class="col-md-5 heading-section ftco-animate text-center">
        <h2 class="mb-4">Our Programs</h2>
        <p>In Order to overcome poverty and help the needy people, Usha has introduced various development programs.</p>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12 ftco-animate">
          <div class="carousel-cause owl-carousel">

              @foreach ($servicesInfo as $item)
                  <div class="item">
                    <div class="cause-entry">
                        <a href="#" class="img" style="background-image: url({{$item->image}});"></a>
                        <div class="text p-3 p-md-4">
                          <h3><a href="#">{{ $item->title }}</a></h3>                        
                          <p>{!! $item->details !!}</p>
                        </div>
                    </div>
                  </div>
              @endforeach

            </div>
          </div>
        </div>
    </div>
</section>
{{-- End Program --}}

{{-- Start Gallery --}}
<section class="ftco-gallery">
  <div>
    @for($i=0;$i<$count/4;$i++)
      <div class="d-md-flex">
        @for($j=0;$j<4;$j++)
                      
          <a href="{{asset($galleryImage2[$img])}}" class="gallery image-popup d-flex justify-content-center align-items-center img ftco-animate" style="background-image: url(            
                  {{asset($galleryImage2[$img])}});">
              <div class="icon d-flex justify-content-center align-items-center">
                  <span class="icon-search"></span>
              </div>
          </a>

          @php
            $img++; 
            if($img == $count)
            {
              break;
            }
          @endphp
        @endfor
      </div>
    @endfor
  </div>
</section>
{{-- End Gallery --}}

{{-- Start Event --}}
<section class="ftco-section bg-light">
  <div class="container">
    <div class="row justify-content-center mb-5 pb-3">
      <div class="col-md-7 heading-section ftco-animate text-center">
        <h2 class="mb-4">Our Latest Events</h2>
      </div>
    </div>
    <div class="row">

    @foreach ($eventData as $item)
     
    @php
        $date = date("D, d M Y", strtotime($item->event_date));
        $strTime = date("h:iA", strtotime($item->start_time));
        $endTime = date("h:iA", strtotime($item->end_time));   
    @endphp
    
          <div class="col-md-4 d-flex ftco-animate">
            <div class="blog-entry align-self-stretch">
            <a href="#" class="block-20" style="background-image: url('{{ $item->image }}');">
            </a>
            <div class="text p-4 d-block">
                <div class="meta mb-3">
                <div><a href="#">{{ $date }}</a></div>
              </div>
              <h3 class="heading mb-4"><a href="#">{{ $item->title }}</a></h3>
              <p class="time-loc"><span class="mr-2"><i class="icon-clock-o"></i> {{ $strTime." - ". $endTime }}</span> <span><i class="icon-map-o"></i> Venue {{ $item->venue }}</span></p>
              <p>{!! $item->details !!}.</p>
              <p><a href="{{ $item->event_link }}">Join Event <i class="ion-ios-arrow-forward"></i></a></p>
            </div>
          </div>
        </div>

    @endforeach

  </div>
</section>
{{-- End Event --}}

<section class="ftco-section-3 img" style="background-image: url(assets/images/bg_3.jpg);">
  <div class="overlay"></div>
  <div class="container">
    <div class="row d-md-flex">
    <div class="col-md-6 d-flex ftco-animate">
        <div class="img img-2 align-self-stretch" style="background-image: url(assets/images/join-us.jpg);"></div>
    </div>
    <div class="col-md-6 volunteer pl-md-5 ftco-animate">
        <h3 class="mb-3">Join Us</h3>
        <form action="#" class="volunter-form">
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Your Name">
    </div>
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Your Email">
    </div>
    <div class="form-group">
      <textarea name="" id="" cols="30" rows="3" class="form-control" placeholder="Message"></textarea>
    </div>
    <div class="form-group">
      <input type="submit" value="Send Message" class="btn btn-white py-3 px-5">
    </div>
    </form>
  </div>    			
      </div>
  </div>
</section>

@endsection