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

	<input type="hidden" id="category-select" name="category_id" value="{{ $item->category_id }}">


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

	{{-- <input type="file" name="image_file"> --}}
	
<div class="form-group form-one__control--full d-flex" style="margin-left: 15px">
	<div class="col-4" style="padding-right: 10px;">
		<label for="file-upload" id="file-label">Upload New Audio/Video File. New upload will remove the previous file. <br></label>

		<input type="file" id="file-upload" name="uploaded_file" accept="audio/*,video/*" class="form-control">
		(Supported: mp3, mp4, wav, avi)
	</div>
	<div class="col-8">
		@if($item->uploaded_file)
			@php
				$fileExtension = pathinfo($item->uploaded_file, PATHINFO_EXTENSION);
				$audioExtensions = ['mp3', 'wav', 'ogg'];
				$videoExtensions = ['mp4', 'avi', 'mov', 'mkv'];
			@endphp

			@if(in_array($fileExtension, $audioExtensions))
				<audio controls>
					<source src="{{ $item->uploaded_file }}" type="audio/{{ $fileExtension }}">
					Your browser does not support the audio element.
				</audio>
			@elseif(in_array($fileExtension, $videoExtensions))
				<video controls style="width: 100%">
					<source src="{{ $item->uploaded_file }}" type="video/{{ $fileExtension }}">
					Your browser does not support the video tag.
				</video>
			@endif
		@endif

	</div>
</div>




</div>

<!-- Family Registration (Initially Hidden) -->
<div class="family_part" style="display: @if ($category->id == 4){{'block'}}@else {{'none'}} @endif;">	
   
   

    <div class="form-group form-one__control--full">
        <label style="margin-top: -20px">
            New upload will add to the previous images. To remove any image, click the 'X' button on the image.
        </label>
    </div>

	<div class="form-group form-one__control--full">
		<label>Upload Family Images (Max 5), to select multiple images press control and select images. </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>
	<input type="hidden" name="deleted_images" id="deleted_images">

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

<script>
    function removeImage(imageUrl, button) {
        // Add the deleted image URL to the hidden input field
        let deletedImages = document.getElementById('deleted_images').value;
        deletedImages += deletedImages ? ',' + imageUrl : imageUrl;
        document.getElementById('deleted_images').value = deletedImages;

        // Remove the image preview
        button.parentElement.remove();
    }
</script>


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

								<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