@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;">
         Ramadan Connect 2025
         <!-- /.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>
         --}}
         <p>Please fill up below form to participate in the Ramadan Connect 2025. Pleach reach out to us by phone : 647 365 5035 or email : info@markhamcc.org for any query. </p>
         <form action="/save_participation_sp" id="participationForm" method="post" enctype="multipart/form-data" class="contact-form  form-one" style="background-color: #f9f4e8; padding: 20px; border-radius: 10px;" >
            @csrf
            @if (!session('user.id'))
            <div class="row">
               <div class="col-md-6">
                  <div class="form-one__control">First Name <span class="required">*</span>
                     <input type="text" name="fname" placeholder="First Name">
                  </div>
               </div>
               <div class="col-md-6">
                  <div class="form-one__control">Last Name
                     <input type="text" name="lname" placeholder="Last Name">
                  </div>
               </div>
               <div class="col-md-6">
                  <div class="form-one__control">Email <span class="required">*</span>
                     <input type="email" name="email" placeholder="Email Address">
                  </div>
               </div>
               <div class="col-md-6">
                  <div class="form-one__control">Phone No <span class="required">*</span>
                     <input type="text" name="phone" placeholder="Phone No">
                  </div>
               </div>
               <div class="col-md-6">
                  <div class="form-one__control">Set Password For Future (Optional)
                     <input type="password" name="password" placeholder="123456">
                  </div>
               </div>
               <div class="col-md-6">
               </div>
            </div>			
            <br>

            @endif
            <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 $index => $category)
				   <div class="category-item {{ $index === 0 ? 'active' : '' }}" 
						onclick="selectCategory({{ $category->id }})" 
						data-id="{{ $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'));
			
					// Find the clicked category element and add 'active' class
					let selectedCategory = document.querySelector(`.category-item[data-id='${categoryId}']`);
					if (selectedCategory) {
						selectedCategory.classList.add('active');
					}
			
					// Handle required field based on category selection
					const fileInput = document.getElementById("file-upload");
					if ([1, 2, 3].includes(parseInt(categoryId))) {
						fileInput.setAttribute("required", "required");
					} else {
						fileInput.removeAttribute("required");
					}
			
					// Call the category change function
					handleCategoryChange();
					updateGenderOptions();
					document.getElementById("2nd_phase").scrollIntoView({ behavior: "smooth" });
				}
			
				document.addEventListener("DOMContentLoaded", function() {
					let firstCategory = document.querySelector('.category-item');
					if (firstCategory) {
						let firstCategoryId = firstCategory.getAttribute('data-id');
						selectCategory(firstCategoryId);
					}
				});
			
				// Form submission validation
				document.getElementById("participationForm").addEventListener("submit", function(event) {
					const selectedCategoryId = parseInt(document.getElementById("category-select").value);
					const fileInput = document.getElementById("file-upload");
			
					if ([1, 2, 3].includes(selectedCategoryId) && fileInput.files.length === 0) {
						event.preventDefault(); // Stop form submission
						alert("Please upload a video before submitting."); // Show alert popup
					}
				});
			</script>
			
			


            <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 <span style="color: red">*</span> (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