@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 transparent;
        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;
    }
    .category-item.active {
        border-color: #856556; /* Highlight selected category */
    }
</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 d-none">Participation</h6><!-- /.sec-title__tagline -->
				</div><!-- /.sec-title__top -->
				<h3 class="sec-title__title">Update Participation Form</h3><!-- /.sec-title__title -->
			</div><!-- /.sec-title -->
			<div class="contact-page__form wow fadeInUp" data-wow-duration="1500ms">


			



<form action="/update_participation_form" 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">
    <input type="hidden" id="category-select" name="category_id" value="{{ $item->category_id }}"> <!-- Store selected category -->

    <div class="category-container">
        @foreach($categories as $cat)
            <div class="category-item {{ $item->category_id == $cat->id ? 'active' : '' }}" 
                 onclick="selectCategory({{ $cat->id }}, this)">
                <img src="https://markhamcc.org/frontend/assets/category-images/{{$cat->id}}.jpg" alt="{{ $cat->name }}">
                <p>{{ $cat->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" style="display: @if ($category->id == 1 || $category->id == 2 || $category->id == 3){{'block'}} @else {{'none'}}@endif;">	


    <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" value="{{$item->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="{{$item->age}}">{{$item->age}}</option>
                    <option value="4-7">Age 4-7</option>
            		<option value="8-12">Age 8-12</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="{{$item->gender}}">{{$item->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: @if ($category->id == 4){{'block'}}@else {{'none'}} @endif;">	
    <h5>Family Registration</h5>

    <div class="form-one__control form-one__control--full">
        <input type="text" name="family_name" value="{{$item->family_name}}" class="form-control" >
    </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 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="previewImages()">
		{{-- <small class="text-muted">You can upload up to 5 images.</small> --}}
	</div>
	
	<!-- Preview previous images (if available) -->
	<div id="image-preview" class="row mt-2" style="margin-bottom: 20px ">
		@if(isset($family_images) && count($family_images) > 0)
		<small class="text-muted">uploaded images.</small>
			@foreach($family_images as $image)
				<div class="col-md-3 image-container">
					<img src="{{ $image }}" class="img-thumbnail" width="120">
					{{-- <button type="button" class="btn btn-danger btn-sm remove-image" onclick="removeImage('{{ $image }}', this)">X</button> --}}
				</div>
			@endforeach
		@endif
	</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" checked required name="terms5" value="terms5"> I have read and agree to the competition rules and submission guidelines.</label>
								<label><input type="checkbox" checked 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" checked required name="terms7" value="terms7"> I understand that the judges’ decisions are final and binding.</label>
								<label><input type="checkbox" checked 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>
							<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: pay@markhamcc.org</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"rows="3">{{$item->message}}</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')}}">
									<input type="hidden" name="id" value="{{$item->id}}">
									<span class="cherito-btn__text" >Update</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