@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;
	}
</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 -->

<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">Participation</h6><!-- /.sec-title__tagline -->
				</div><!-- /.sec-title__top -->
				<h3 class="sec-title__title">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> --}}

				<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" id="participationForm" method="post" enctype="multipart/form-data" class="contact-form  form-one" style="background-color: #f9f4e8; padding: 20px; border-radius: 10px;" >
	@csrf
	<h5>Select Category</h5>

<div class="form-one__control">
    <select class="selectpicker" id="category-select" name="category_id" aria-label="Default select example" onchange="handleCategoryChange()">
        <option selected="">Select one</option>
        @foreach($categories as $category)
            <option value="{{ $category->id }}">{{ $category->name }} {{ $category->description }}</option>
        @endforeach
    </select>
</div> 

<br>

<!-- Children Registration (Initially Hidden) -->
<div class="child_part" style="display: none;">
    <h5>Children Registration Details</h5>
    <div class="form-one__group1">
        <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="generateForms()">Generate</button>
                </div>
            </div>

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

	{{-- <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">Upload Audio/Video File</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">
		<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>


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

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

    <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 generateForms() {
    let numChildren = document.getElementById("num_children").value;
    let container = document.getElementById("children-container");

    container.innerHTML = ""; // Clear previous entries

    if (numChildren < 1 || isNaN(numChildren)) {
        alert("Please enter at least 1 child.");
        return;
    }

    for (let i = 1; i <= numChildren; i++) {
        let formHTML = `
            <div class="col-md-12 child-form">
                <div class="card p-3 mb-3">
                    <h4 class="mb-3">Child ${i}</h4>
                    <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" required>
                        </div>
                        <div class="col-md-4">
                            <label>Age <span style="color: red">*</span></label>
                            <input type="number" name="age[]" class="form-control" placeholder="Enter Age" required oninput="validateAge(this)">
                        </div>
                    
                        <div class="col-md-4">
                            <label>Gender <span style="color: red">*</span></label>
                            <select name="gender[]" class="form-control gender-select" required>
                                <option value="">Select Gender</option>
                                <option value="Male">Male</option>
                                <option value="Female">Female</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        `;
        container.innerHTML += formHTML;
    }

    updateGenderOptions();
}

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 greatr than 3.");
        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" name="terms5" value="terms5"> I have read and agree to the competition rules and submission guidelines.</label>
								<label><input type="checkbox" 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" name="terms7" value="terms7"> I understand that the judges’ decisions are final and binding.</label>
								<label><input type="checkbox" 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>
							<div class="form-group form-one__control--full">
								<p>Support Our Cause <br>
									While participation is free, we encourage you to support our mission by donating:
									
								</p>
								<a href="/donation" target="_blank" >
									Click for donation page
								</a>
								<p>E-Transfer: pay2mcc@gmail.com</p>
								
							</div>
							<div class="form-group form-one__control--full">
								<legend>No amount is too big or small—your contribution makes a difference!</legend>
								<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>



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

	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script>
	$(document).ready(function () {
		$("#myForm").submit(function (e) {
			if ($("input[type=checkbox][name^='terms']:not([name='terms9']):not(:checked)").length > 0) {
				alert("You must agree to all required terms before submitting.");
				e.preventDefault(); // Prevent form submission
			}
		});
	});
	</script>
	
	
 @endsection