@extends('layouts.web')

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

@section('content')
    <div class="hero-wrap" style="background-image: url('images/bg_7.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%' }">
                    <h1 class="mb-4" data-scrollax="properties: { translateY: '30%', opacity: 1.6 }">Doing Nothing is Not
                        An Option of Our Life</h1>
                    <p class="mb-5" data-scrollax="properties: { translateY: '30%', opacity: 1.6 }">Created by <a
                            href="#">Colorlib.com</a></p>

                    <p data-scrollax="properties: { translateY: '30%', opacity: 1.6 }"><a href="https://vimeo.com/45830194"
                            class="btn btn-white btn-outline-white px-4 py-3 popup-vimeo"><span
                                class="icon-play mr-2"></span>Watch Video</a></p>
                </div>
            </div>
        </div>
    </div>

    <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>Served Over</span>
                            <strong class="number" data-number="1432805">0</strong>
                            <span>Children in 190 countries in the world</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" style="color: #fff">Donate Money</h3>
                            <p>Even the all-powerful Pointing has no control about the blind texts.</p>
                            <p><a href="{{ route('donate') }}" class="btn btn-white px-3 py-2 mt-2">Donate Now</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" style="color: #fff">Be a Volunteer</h3>
                            <p>Even the all-powerful Pointing has no control about the blind texts.</p>
                            <p><a href="{{ route('volunteer') }}" class="btn btn-white px-3 py-2 mt-2">Be A Volunteer</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="ftco-section">
        <div class="container">
            <div class="row">
                <div class="col-md-4 d-flex align-self-stretch ftco-animate">
                    <div class="media block-6 d-flex services p-3 py-4 d-block">
                        <div class="icon d-flex mb-3"><span class="flaticon-donation-1"></span></div>
                        <div class="media-body pl-4">
                            <h3 class="heading">Make Donation</h3>
                            <p>Even the all-powerful Pointing has no control about the blind texts it is an almost
                                unorthographic.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 d-flex align-self-stretch ftco-animate">
                    <div class="media block-6 d-flex services p-3 py-4 d-block">
                        <div class="icon d-flex mb-3"><span class="flaticon-charity"></span></div>
                        <div class="media-body pl-4">
                            <h3 class="heading">Become A Volunteer</h3>
                            <p>Even the all-powerful Pointing has no control about the blind texts it is an almost
                                unorthographic.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 d-flex align-self-stretch ftco-animate">
                    <div class="media block-6 d-flex services p-3 py-4 d-block">
                        <div class="icon d-flex mb-3"><span class="flaticon-donation"></span></div>
                        <div class="media-body pl-4">
                            <h3 class="heading">Sponsorship</h3>
                            <p>Even the all-powerful Pointing has no control about the blind texts it is an almost
                                unorthographic.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>



    <section class="ftco-section">
        <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">Latest Donations</h2>
                    <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live
                        the blind texts.</p>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 d-flex mb-sm-4 ftco-animate">
                    <div class="staff">
                        <div class="d-flex mb-4">
                            <div class="img" style="background-image: url(images/person_1.jpg);"></div>
                            <div class="info ml-4">
                                <h3><a href="teacher-single.html">Ivan Jacobson</a></h3>
                                <span class="position">Donated Just now</span>
                                <div class="text">
                                    <p>Donated <span>$300</span> for <a href="#">Children Needs Food</a></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 d-flex mb-sm-4 ftco-animate">
                    <div class="staff">
                        <div class="d-flex mb-4">
                            <div class="img" style="background-image: url(images/person_2.jpg);"></div>
                            <div class="info ml-4">
                                <h3><a href="teacher-single.html">Ivan Jacobson</a></h3>
                                <span class="position">Donated Just now</span>
                                <div class="text">
                                    <p>Donated <span>$150</span> for <a href="#">Children Needs Food</a></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 d-flex mb-sm-4 ftco-animate">
                    <div class="staff">
                        <div class="d-flex mb-4">
                            <div class="img" style="background-image: url(images/person_3.jpg);"></div>
                            <div class="info ml-4">
                                <h3><a href="teacher-single.html">Ivan Jacobson</a></h3>
                                <span class="position">Donated Just now</span>
                                <div class="text">
                                    <p>Donated <span>$250</span> for <a href="#">Children Needs Food</a></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="ftco-gallery">
        <div class="container-fluid">
            <div class="row">
                @foreach ($galleries as $gallery)
                    <div class="col-md-3" style="padding-left: 0px; padding-right: 0px;">
                        <a href="{{ $gallery->image_path }}"
                            class="gallery image-popup d-flex justify-content-center align-items-center img ftco-animate"
                            style="background-image: url({{ $gallery->image_path }});">
                            <div class="icon d-flex justify-content-center align-items-center">
                                <span class="icon-search"></span>
                            </div>
                        </a>
                    </div>
                @endforeach
            </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">
                    <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>

	<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>
@endsection


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


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