@extends('layouts.web')

@section('title', 'Events - Chaupal Foundation')

@section('content')

    <div class="hero-wrap" style="background-image: url('images/bg_1.jpg');" data-stellar-background-ratio="0.5">
        <div class="overlay"></div>
        <div class="container">
            <div class="row no-gutters slider-text align-items-center justify-content-center" data-scrollax-parent="true">
                <div class="col-md-7 ftco-animate text-center" data-scrollax=" properties: { translateY: '70%' }">
                    <p class="breadcrumbs" data-scrollax="properties: { translateY: '30%', opacity: 1.6 }"><span
                            class="mr-2"><a href="{{ route('index') }}">Home</a></span> <span>Event</span></p>
                    <h1 class="mb-3 bread" data-scrollax="properties: { translateY: '30%', opacity: 1.6 }">Events</h1>
                </div>
            </div>
        </div>
    </div>


    <section class="ftco-section">
        <div class="container">
            <div class="row">
                @foreach ($events as $event)
                <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({{ asset($event->image_path) }});">
                      </a>
                      <div class="text p-4 d-block">
                          <div class="meta mb-3">
                              <div><a href="#">{{ $event->date }}</a></div>
                          </div>
                          <h3 class="heading mb-4"><a href="#">{{ $event->name }}</a></h3>
                          <p class="time-loc"><span class="mr-2"><i class="icon-clock-o"></i> 
                            {{\Carbon\Carbon::createFromFormat('H:i:s',$event->time)->format('h:i A')}}    
                        </span>
                              <span><i class="icon-map-o"></i> {{ $event->location }}</span></p>
                          <p>{{ $event->remarks }}
                        </p>
                          <p><a href="{{ route('volunteer') }}">Join Event <i class="ion-ios-arrow-forward"></i></a></p>
                      </div>
                  </div>
              </div>
                @endforeach
            </div>


            <div class="d-flex mt-4 justify-content-center">
                {!! $events->links() !!}
            </div>
        </div>
    </section>

    @push('styles')
        {{-- <link href="css/test-home.css" rel="stylesheet" /> --}}
    @endpush


    @push('scripts')
        {{-- <script src="js/test-home.js"></script> --}}
    @endpush