@extends('layouts.master')
@section('main_content')
<style>
	.form-one textarea{
		height: 65px;
		padding: 14px 30px 0;
	}
</style>
<section class="page-header">
	<div class="page-header__bg" style="background-image: url('{{ asset('frontend/assets/images/about.png') }}');"></div>
	<div class="container">
		<div class="page-header__content">
			<h2 class="page-header__title"> {{ $data->title }} </h2>
			<ul class="cherito-breadcrumb list-unstyled">
				<li><a href="/">Home</a></li>
				<li><span>Program</span></li>
				<li><span>Program Details </span></li>
			</ul><!-- /.cherito-breadcrumb list-unstyled -->
		</div><!-- /.page-header__content -->
	</div><!-- /.container -->
</section><!-- /.page-header -->

<section class="event-details section-space">
	<div class="container">
		<div class="row gutter-y-50">
			<div class="col-xl-8 col-lg-7">
				<div class="event-details__content">
					<div class="event-details__image wow fadeInUp" data-wow-duration="1500ms">
						<img src="{{ URL::asset('storage/app/public/'.$data->image.'')}}" alt="{{$data->title}}">

					</div><!-- /.event-details__image -->
					<div class="event-details__inner event-details__inner--1 wow fadeInUp" data-wow-duration="1500ms">
						<h3 class="event-details__title">{{$data->title}}</h3><!-- /.event-details__title -->
						<p class="event-details__text">{!! $data->description !!}</p><!-- /.event-details__text -->
					</div><!-- /.event-details__inner -->
					<div class="event-details__inner event-details__inner--2 wow fadeInUp d-none" data-wow-duration="1500ms">
						<h3 class="event-details__title">Event Requirements</h3><!-- /.event-details__title -->
						<p class="event-details__text">Neque porro est qui dolorem ipsum quia quaed inventor veritatis et quasi architecto beatae vitae dicta sunt explicabo. Aelltes port lacus quis enim var.</p><!-- /.event-details__text -->
					</div><!-- /.event-details__inner -->
					<ul class="event-details__list list-unstyled wow fadeInUp d-none" data-wow-duration="1500ms">
						<li>
							<span class="event-details__list__icon">
								<i class="icon-check"></i>
							</span>
							Nibh Nam nec eros id magna hendrerit
						</li>
						<li>
							<span class="event-details__list__icon">
								<i class="icon-check"></i>
							</span>
							Vitae nibh Nam nec eros id magna hendrerit
						</li>
						<li>
							<span class="event-details__list__icon">
								<i class="icon-check"></i>
							</span>
							Nam nec eros id magna hendrerits
						</li>
					</ul><!-- /.event-details__list list-unstyled -->
					<div class="event-details__button wow fadeInUp" data-wow-duration="1500ms">
						<a href="/contact" class="cherito-btn">
							<span class="cherito-btn__text">Register Now</span>
							<span class="cherito-btn__hover cherito-btn__hover--1"></span>
							<span class="cherito-btn__hover cherito-btn__hover--2"></span>
							<span class="cherito-btn__hover cherito-btn__hover--3"></span>
							<span class="cherito-btn__hover cherito-btn__hover--4"></span>
							<span class="cherito-btn__hover cherito-btn__hover--5"></span>
						</a><!-- /.cherito-btn -->
					</div><!-- /.event-details__button -->
				</div><!-- /.event-details__content -->
			</div><!-- /.col-xl-8 col-lg-7 -->
			<div class="col-xl-4 col-lg-5">
				<div class="event-details__info">
					<div class="event-details__info__item event-details__info__item--1 wow fadeInRight" data-wow-duration="1500ms">
						<h3 class="event-details__info__title">Program Information</h3>
						<ul class="event-details__info__list list-unstyled">
							<li>
								<span class="event-details__info__list__title">Start Date:</span>
								<span class="event-details__info__list__text">24 July, 2024</span>
							</li>
							<li>
								<span class="event-details__info__list__title">Time Duration:</span>
								<span class="event-details__info__list__text">08:00am - 05:00pm</span>
							</li>
							<li>
								<span class="event-details__info__list__title">Location:</span>
								<span class="event-details__info__list__text"><a href="../../www.google.com/maps.html">6391
										Elgin St. Celina, Delaware 10299</a></span>
							</li>
							<li>
								<span class="event-details__info__list__title">Phone:</span>
								<span class="event-details__info__list__text"><a href="tel:(319)555-0115">(319)
										555-0115</a></span>
							</li>
							<li>
								<span class="event-details__info__list__title">Email:</span>
								<span class="event-details__info__list__text"><a href="mailro:info@example.com">info@example.com</a></span>
							</li>
						</ul><!-- /.event-details__info__list -->
						<div class="social-links">
							<a href="https://www.facebook.com/">
								<span class="social-links__icon">
									<i class="fab fa-facebook-f" aria-hidden="true"></i>
									<span class="sr-only">Facebook</span>
								</span><!-- /.social-links__icon -->
							</a>
							<a href="https://www.linkedin.com/">
								<span class="social-links__icon">
									<i class="fab fa-linkedin-in" aria-hidden="true"></i>
									<span class="sr-only">Linkedin</span>
								</span><!-- /.social-links__icon -->
							</a>
							<a href="https://www.twitter.com">
								<span class="social-links__icon">
									<i class="fab fa-twitter" aria-hidden="true"></i>
									<span class="sr-only">Twitter</span>
								</span><!-- /.social-links__icon -->
							</a>
							<a href="https://www.youtube.com">
								<span class="social-links__icon">
									<i class="fab fa-youtube" aria-hidden="true"></i>
									<span class="sr-only">Youtube</span>
								</span><!-- /.social-links__icon -->
							</a>
						</div><!-- /.social-links -->
					</div><!-- /.event-details__info__item -->
					<div class="event-details__info__item wow fadeInRight" data-wow-duration="1500ms">
						<div class="event-details__info__map">
							<div class="google-map google-map__event-details">
								<iframe title="template google map" src="../../www.google.com/maps/embed8d78.html?pb=!1m18!1m12!1m3!1d4562.753041141002!2d-118.80123790098536!3d34.152323469614075!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80e82469c2162619%3A0xba03efb7998eef6d!2sCostco+Wholesale!5e0!3m2!1sbn!2sbd!4v1562518641290!5m2!1sbn!2sbd" class="map__event-details" allowfullscreen></iframe>
							</div>
							<!-- /.google-map -->
						</div><!-- /.event-details__info__map -->
					</div><!-- /.event-details__info__item -->
				</div><!-- /.event-details__info -->
			</div><!-- /.col-xl-4 col-lg-5 -->
		</div><!-- /.row gutter-y-50 -->
	</div><!-- /.container -->
</section><!-- /.event-details section-space -->	

@if ($data->slug == 'ramadan-connect-2025')
	{{-- donation  --}}
	<section class="contact-page section-space " style="background-color: #fff">
		<div class="container">
			<div class="sec-title sec-title--center wow fadeInUp" data-wow-duration="1500ms">
				<div class="sec-title__top">
				{{-- <img src="{{ asset('frontend/assets/images/blog/blog-admin-1-1.png') }}" alt="Wade Warren"> --}}

					<h6 class="sec-title__tagline">Registration</h6><!-- /.sec-title__tagline -->
				</div><!-- /.sec-title__top -->
				<h3 class="sec-title__title">Registration Form</h3><!-- /.sec-title__title -->
			</div><!-- /.sec-title -->
			<div class="contact-page__form wow fadeInUp" data-wow-duration="1500ms"> 

				<div style="position:relative;overflow:hidden;height:1200px;width:100%;"><iframe title='Donation form powered by Zeffy' style='position: absolute; border: 0; top:0;left:0;bottom:0;right:0;width:100%;height:100%' src='https://www.zeffy.com/embed/donation-form/support-mcc-empowering-youth-and-building-community' allowpaymentrequest allowTransparency="true"></iframe></div> 

				<div class="sec-title__top mt-5">
					<h6 class="sec-title__tagline">
						Please donate first and submit your files here.</h6><!-- /.sec-title__tagline -->
				</div>

				<form action="/save_participation" method="post" enctype="multipart/form-data" class="contact-form  form-one" style="background-color: #f9f4e8; padding: 20px; border-radius: 10px;" >
					@csrf
						<div class="form-one__group">
						
						
							<div class="form-one__control">Name
								<input type="text" required name="fname" placeholder="Full Name">
							</div>
							<div class="form-one__control">Email
								<input type="email" required name="email" placeholder="Email Address">
							</div>
							<div class="form-one__control form-one__control--full">I am contributing to Markham Community Connect in this way… *
								<textarea name="message" placeholder="Write Message . . ." rows="3"></textarea>
							</div>

							<div class="form-group form-one__control form-one__control--full">
								<legend>Categories I am participating in (select up to two)</legend>
								<label><input type="radio" name="category" value="quran"> Quran Recitation Challenge (Boys and Girls, Ages 11–14)</label>
								<label><input type="radio" name="category" value="muazzin"> The Mu’azzin Challenge (Boys 11–14)</label>
								<label><input type="radio" name="category" value="asmaul"> Asma'ul Husna Challenge (Girls 11–14)</label>
								<label><input type="radio" name="category" value="ramadan"> The Ramadan Home Challenge (Family)</label>
							</div>
					
							{{-- <div class="form-group form-one__control">
								<legend>I have read the rules and judging criteria</legend>
								<label><input type="radio" name="rules" value="yes" required> Yes</label>
								<label><input type="radio" name="rules" value="no" required> No</label>
							</div>
							
							<div class="form-group form-one__control">
								<legend>Have your donated?</legend>
								<label><input type="radio" name="donation" value="yes" required> Yes</label>
								<label><input type="radio" name="donation" value="no" required> No</label>
							</div> --}}
							
					
							
							<div class="form-one__control form-one__control--full">Your video link
								<textarea required name="video_links" placeholder="Upload your video in google drive and paste the link here. . . ." rows="3"></textarea>

								{{-- <input type="file" name="video_link[]" class="" multiple> --}}
							</div><!-- /.form-one__control -->


						
<style>
.disabled-btn {
            background-color: #cccccc;
            color: #666666;
            cursor: not-allowed;
            pointer-events: auto; /* Enable clicking for disabled-looking buttons */
        }
</style>
<script>
	function showPopup(event) {
		event.preventDefault();
		alert("Please donate first from the form above!");
	}
</script>

							<div class="form-one__control contact-page__form__button form-one__control--full">

								<input type="hidden" name="type" value="Contact Form">
								<button type="submit" class="cherito-btn btn btn-primary cherito-btn1">
								{{-- <button type="submit" class="cherito-btn btn btn-primary cherito-btn1 disabled-btn" onclick="showPopup(event)"> --}}
									<span class="cherito-btn__text" >Submit</span>
								</button><!-- /.cherito-btn -->
							</div><!-- /.form-one__control -->

							
							
						</div><!-- /.form-one__group -->
				</form>
				<!-- /.form-one -->
				<div class="result"></div><!-- /.result -->
			</div><!-- /.contact-page__form -->
		</div><!-- /.container -->
	</section> 
	{{-- donation end --}}
 @endif
 @endsection