@extends('layouts.web')

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

@section('content')

<div class="hero-wrap" style="background-image: url('images/bg_2.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>Volunteer</span></p>
          <h1 class="mb-3 bread" data-scrollax="properties: { translateY: '30%', opacity: 1.6 }">Volunteer</h1>
        </div>
      </div>
    </div>
  </div>

  <section class="ftco-section-3 img" style="background-image: url(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 fadeInUp ftco-animated">
            <div class="img img-2 align-self-stretch" style="background-image: url(images/bg_4.jpg);"></div>
        </div>
        <div class="col-md-6 volunteer pl-md-5 ftco-animate fadeInUp ftco-animated">
            <h3 class="mb-3">Be a volunteer</h3>
            @if (isset($errors) && count($errors) > 0)
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            @if(session()->has('message'))
                <div class="alert alert-success">
                    {{ session()->get('message') }}
                </div>
            @endif
        <form action="{{ route('saveVolunteer') }}" class="volunter-form" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="form-group">
            <input type="text" class="form-control" name="name" value="{{ old('name') }}" placeholder="Your Name">
            </div>
            <div class="form-group">
            <input type="email" class="form-control" name="email" value="{{ old('email') }}" placeholder="Your Email">
            </div>
            <div class="form-group">
            <input type="number" class="form-control" name="phone" value="{{ old('phone') }}" placeholder="Your Phone">
            </div>
            <div class="form-group">
            <input type="text" class="form-control" name="address" value="{{ old('address') }}" placeholder="Complete Address">
            </div>
            <div class="form-group">
            <textarea cols="30" rows="3" name="message" class="form-control" placeholder="Message">{{ old('message') }}</textarea>
            </div>
            <div class="form-group">
            <input type="submit" value="Submit" class="btn btn-white py-3 px-5">
            </div>
        </form>
        </div>    			
        </div>
    </div>
</section>

  <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 fadeInUp ftco-animated">
          <h2 class="mb-4">Our Latest Events</h2>
        </div>
      </div>
      <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>
  </section>

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


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