@extends('layouts.master')
@section('main_content')
<style>
	.form-one textarea{
		height: 65px;
		padding: 14px 30px 0;
	}
	.ramadan_category{
		color: #2E1104;
		font-weight: 700;
		font-size: 20px;
		margin-top: 20px;
		margin-bottom: 10px;
	}
	input.form-control, select.form-control {
    	border: 1px solid #ddd !important;
		height: 60px;
	}


    .category-container {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        justify-content: center;
    }
    .category-item {
        width: 45%; /* 2 in a row */
        cursor: pointer;
        text-align: center;
        border: 2px solid #eff9fd;
        border-radius: 10px;
        padding: 10px;
        transition: 0.3s;
    }
    .category-item img {
        width: 100%;
        height: auto;
        border-radius: 10px;
    }
    .category-item p {
        margin-top: 5px;
        font-weight: bold;
        background: #0978a7;
        color: #fff;
    }
    .category-item.active {
        border-color: #856556; /* Highlight selected category */
    }
    
    
    .form-group legend {
    font-weight: bold;
    font-size: 1.1em;
    margin-bottom: 10px;
    color: #0978a7;
    text-decoration: underline;
}



</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"> </h2>
			<ul class="cherito-breadcrumb list-unstyled">
				<li><a href="/">Home</a></li>
				<li><span>Program</span></li>
				<li><span>Ramadan 2025 </span></li>
			</ul><!-- /.cherito-breadcrumb list-unstyled -->
		</div><!-- /.page-header__content -->
	</div><!-- /.container -->
</section><!-- /.page-header -->

<script>
		$(document).ready(function(){
			setTimeout(function() {
				$(".flash-message").fadeOut("slow");
			}, 5000);
		});
</script>

<div class="container flash-message mt-2">
    @foreach (['danger', 'warning', 'success', 'info'] as $msg)
        @if(Session::has('alert-' . $msg))
            <p class="alert alert-{{ $msg }} text-center">{{ Session::get('alert-' . $msg) }} <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a></p>
        @endif
    @endforeach
</div> 




	{{-- donation  --}}
	<section class="contact-page section-space1" 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 d-none">Participation</h6><!-- /.sec-title__tagline -->
				</div><!-- /.sec-title__top -->
				<h3 class="sec-title__title" style="color: #844205; margin-top: 20px; background: #f8e8d8; padding: 10px; border-radius: 5px; display: inline-block;">
                    Participation 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> --}}

			
			



<form action="/save_participation" id="participationForm" method="post" enctype="multipart/form-data" class="contact-form  form-one" style="background-color: #f9f4e8; padding: 20px; border-radius: 10px;" >
	@csrf

<div class="form-group form-one__control--full">
	<legend>Select Category (Click on the image) </legend>
</div>

<h5 style="color: #f9f4e8">.</h5>

<div class="form-one__control">
    <input type="hidden" id="category-select" name="category_id"> 
    <div class="category-container">
        @foreach($categories as $category)
            <div class="category-item" onclick="selectCategory({{ $category->id }})">
                <img src="https://markhamcc.org/frontend/assets/category-images/{{$category->id}}.jpg" alt="{{ $category->name }}">
                <p>{{ $category->name }}</p>
            </div>
        @endforeach
    </div>
</div>



<script>
	function selectCategory(categoryId) {
		document.getElementById("category-select").value = categoryId;
		document.querySelectorAll('.category-item').forEach(item => item.classList.remove('active'));
		event.currentTarget.classList.add('active');

		// Call the category change function
		handleCategoryChange();

		// Call the gender update function
		updateGenderOptions();

		// Smooth scroll to 2nd phase
		document.getElementById("2nd_phase").scrollIntoView({ behavior: "smooth" });
	}
</script>


<br>

<div id="2nd_phase"> &nbsp;</div>
<!-- Children Registration (Initially Hidden) -->
<div class="child_part" id="" style="display: none;">
    <h5>Children Registration Details</h5>


	<div class="col-md-12 child-form1">  
        <div class="row">
            <div class="col-md-4">
                <label>Child Name <span style="color: red">*</span></label>
                <input type="text" name="child_name[]" class="form-control" placeholder="Enter Child Name">
            </div>  
 
			<div class="col-md-4">
                <label>Age Group <span style="color: red">*</span></label>
                <select name="age[]" class="form-control age-select">
                    <option value="">Select Age Goup</option>
                    <option value="4-7">Age 4-7</option>
            		<option value="8-10">Age 8-10</option>
            		<option value="11-14">Age 11-14</option>
                </select> 
            </div>
            

            <div class="col-md-4">
                <label>Gender <span style="color: red">*</span></label>
                <select name="gender[]" class="form-control gender-select">
                    <option value="">Select Gender</option>
                    <option value="Male">Male</option>
                    <option value="Female">Female</option>
                </select>
            </div>
        </div>
	</div>


    <div class="form-one__group1 d-none">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <label for="num_children">Number of Children <span style="color: rgb(168, 59, 59)">*</span></label>
                    <input type="number" id="num_children" class="form-control" min="1" max="10" placeholder="Enter Number of Children">
                    <button type="button" class="btn btn-success mt-2" onclick="">Generate</button>
                </div>
            </div>

            <div id="children-container" class="row mt-3"></div>
        </div>
    </div>
	

	<script>
		let mediaRecorder;
		let recordedChunks = [];
		
		document.getElementById("start-recording").addEventListener("click", async function () {
			recordedChunks = [];
		
			try {
				// Request video and audio permissions
				const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
		
				// Set video preview
				let videoElement = document.getElementById("recorded-video");
				videoElement.srcObject = stream;
				videoElement.style.display = "block";
				videoElement.play();
		
				mediaRecorder = new MediaRecorder(stream, { mimeType: "video/webm" });
		
				mediaRecorder.ondataavailable = (event) => {
					if (event.data.size > 0) {
						recordedChunks.push(event.data);
					}
				};
		
				mediaRecorder.onstop = () => {
					let blob = new Blob(recordedChunks, { type: "video/webm" });
					let url = URL.createObjectURL(blob);
	
					let videoElement = document.getElementById("recorded-video");
					videoElement.srcObject = null;
					videoElement.src = url;
					videoElement.controls = true;
	
					let file = new File([blob], "recording.webm", { type: blob.type });
	
					// Assign recorded file to a real file input
					let recordedFileInput = document.getElementById("recorded-file");
					let dataTransfer = new DataTransfer();
					dataTransfer.items.add(file);
					recordedFileInput.files = dataTransfer.files;
				};
	
				mediaRecorder.start();
		
				document.getElementById("start-recording").style.display = "none";
				document.getElementById("stop-recording").style.display = "block";
			} catch (err) {
				alert("Camera or microphone access denied!");
				console.error(err);
			}
		});
		
		document.getElementById("stop-recording").addEventListener("click", function () {
			mediaRecorder.stop();
			document.getElementById("stop-recording").style.display = "none";
			document.getElementById("start-recording").style.display = "block";
		});
	</script>

	{{-- <input type="file" name="image_file"> --}}
	
<div class="form-group form-one__control--full d-flex" style="margin-left: 15px">
	<div class="col-4">
		<label for="file-upload" id="file-label">Upload Audio/Video File (Supported: mp3, mp4, wav, avi)</label>

		<input type="file" id="file-upload" name="uploaded_file" accept="audio/*,video/*" class="form-control">
	</div>
	<div class="col-2"></div>
	<div class="col-6 d-none">
		<h5>Record Your Audio & Video</h5>
		<video id="recorded-video" controls style="display:none; width: 100%; max-width: 200px;"></video>
		
		<button type="button" id="start-recording" class="btn btn-success">Start Recording</button>
		<button type="button" id="stop-recording" class="btn btn-danger" style="display:none;">Stop Recording</button>
		
		<input type="file" name="recorded_file" id="recorded-file" style="display: none;">
	</div>
</div>




</div>

<!-- Family Registration (Initially Hidden) -->
<div class="family_part" style="display: none;">
    <h5>Family Registration</h5>

    <div class="form-one__control form-one__control--full">
        <input type="text" name="family_name" placeholder="Family Name">
    </div>

    <div class="form-group form-one__control--full">
        <label style="margin-top: -20px">
            <input type="checkbox" name="terms4" value="terms4"> Participating in the Ramadan Home Challenge (Family Event)
        </label>
    </div>

	<div class="form-group form-one__control--full">
		<label>Upload Family Images (Max 5)</label>
		<input type="file" name="family_images[]" id="family_images" class="form-control" accept="image/*" multiple onchange="validateFiles()">
		<small class="text-muted">You can upload up to 5 images.</small>
	</div>
	
	<script>
		function validateFiles() {
			let fileInput = document.getElementById("family_images");
			let files = fileInput.files;
	
			if (files.length > 5) {
				alert("You can only upload up to 5 images.");
				fileInput.value = ""; // Clear the selection
			}
		}
	</script>
	

    <div id="image-preview" class="row mt-2"></div>
</div>

<script>
    function handleCategoryChange() {
        let selectedCategory = document.getElementById("category-select").value;
        let childPart = document.querySelector(".child_part");
        let familyPart = document.querySelector(".family_part");
        let childrenContainer = document.getElementById("children-container");

        // Reset previous child forms when category changes
        childrenContainer.innerHTML = "";

        if (selectedCategory == "1" || selectedCategory == "2" || selectedCategory == "3") {
            childPart.style.display = "block";
            familyPart.style.display = "none";
        } else if (selectedCategory == "4") {
            childPart.style.display = "none";
            familyPart.style.display = "block";
        } else {
            childPart.style.display = "none";
            familyPart.style.display = "none";
        }
    }




	function validateAge(ageInput) {
		let age = ageInput.value;
		if (age > 14) {
			alert("Age must be below 14.");
			ageInput.value = ""; // Clear the input if the age is over 14
		}
		if (age < 4) {
			alert("Age must be at least 4.");
			ageInput.value = ""; // Clear the input if the age is over 14
		}
	}


	function updateGenderOptions() {
    let selectedCategory = document.getElementById("category-select").value;
    let genderSelects = document.querySelectorAll(".gender-select");

    genderSelects.forEach(select => {
        select.innerHTML = ""; // Clear existing options

        let defaultOption = document.createElement("option");
        defaultOption.value = "";
        defaultOption.textContent = "Select Gender";
        select.appendChild(defaultOption);

        if (selectedCategory == "2") {
            let maleOption = document.createElement("option");
            maleOption.value = "Male";
            maleOption.textContent = "Male";
            select.appendChild(maleOption);
        } else if (selectedCategory == "3") {
            let femaleOption = document.createElement("option");
            femaleOption.value = "Female";
            femaleOption.textContent = "Female";
            select.appendChild(femaleOption);
        } else {
            let maleOption = document.createElement("option");
            maleOption.value = "Male";
            maleOption.textContent = "Male";
            select.appendChild(maleOption);

            let femaleOption = document.createElement("option");
            femaleOption.value = "Female";
            femaleOption.textContent = "Female";
            select.appendChild(femaleOption);
        }
    });
}

</script>





							<div class="form-group form-one__control--full">
								<legend>Acknowledgments and Disclaimer </span></legend>
								<label><input type="checkbox" required name="terms5" value="terms5"> I have read and agree to the competition rules and submission guidelines.</label>
								<label><input type="checkbox" required name="terms6" value="terms6"> I acknowledge that **Markham Community Connect (MCC)** and **Islamic Society of Markham (ISM)** do not assume any responsibility for submissions or participation.</label>
								<label><input type="checkbox" required name="terms7" value="terms7"> I understand that the judges’ decisions are final and binding.</label>
								<label><input type="checkbox" required name="terms8" value="terms8"> I allow my submissions, including videos and audio recordings, to be shared on social media and with our partners for promotional purposes.</label>
							</div>
							<br>
							<div class="form-group form-one__control--full">
								<legend>Support Our Cause </legend> </br>
									While participation is free, we encourage you to support our mission by donating:
									
								</p>
								<ul>
								    <li>
								        <a href="/donation" target="_blank" >
        									Click for donation page
        								</a>
								    </li>
								    <li>E-Transfer: pay@markhamcc.org</li>
								</ul>
							</div>
							<div class="form-group form-one__control--full">
								<p>No amount is too big or small—your contribution makes a difference!</p>
								<label>
									<input type="checkbox" name="terms9" value="terms9"> I have donated to support this event.
								</label>
								
							</div>
							<div class="form-one__control form-one__control--full">Additional Notes (Optional)
								<textarea name="message" placeholder="Write Note . . ." rows="3"></textarea>
							</div> 
							
							<div class="form-one__control form-one__control--full d-none">Your video link
								<textarea name="video_links" placeholder="Upload your video in google drive and paste the link here. . . ." rows="3"></textarea>
							</div><!-- /.form-one__control -->

  <br>

<p>Note: Once submitted you can go back and remove and resubmit your attachment by going to the dashboard under account you already registered.</p>

							<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)"> --}}
									<input type="hidden" name="user_id" value="{{session('user.id')}}">
									<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 --}}

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



	<section class="mt-5" style="background-color: #fff"></section>

	
 @endsection