@extends(env("CLIENT_PATH").".welcome")
@section("content")


<div class="container">
			<div class="row">
				<div class="col-lg-8 offset-lg-2 col-md-10 offset-md-1">
					<div class="from-section-full">
						<div class="top-section">
                        <img src="<?php echo site_url(SITEVARS->Campaigns[0]->cover_photo);?>" class="img-fluid" />
						</div>
						<div id="wizard_container">
							<div id="top-wizard">
								<div id="progressbar"></div>
							</div>
							<!-- /top-wizard -->
							<form method="POST">
								<input id="website" name="website" type="text" value="">
								<!-- Leave for security protection, read docs for details -->
								<div id="middle-wizard">
									<div class="step">
										<h3 class="main_question"><strong>1/4</strong>Please fill with your details</h3>
										<div class="row">
											<div class="col-sm-6">
												<div class="form-group">
													<input type="text" name="firstname" class="form-control required" placeholder="First Name">
												</div>
											</div>
											<div class="col-sm-6">
												<div class="form-group">
													<input type="text" name="lastname" class="form-control required" placeholder="Last Name">
												</div>
											</div>
											<div class="col-sm-6">
												<div class="form-group">
													<input type="email" name="email" class="form-control required" placeholder="Your Email">
												</div>
											</div>
											<div class="col-sm-6">
												<div class="form-group">
													<input type="text" name="mobile" class="form-control " placeholder="Mobile Number">
												</div>
											</div>
											<div class="col-sm-6">
												<div class="form-group">
													<select class="wide required" name="country">
														<option value="">Your Country</option>
														<option value="Europe">Europe</option>
														<option value="Asia">Asia</option>
														<option value="North America">North America</option>
														<option value="South America">South America</option>
														<option value="Oceania">Oceania</option>                             
													</select>
												</div>
											</div>
											<div class="col-sm-6">
												<div class="form-group">
													<select class="wide required" name="city">
														<option value="">Your City</option>
														<option value="city_1">City 1</option>
														<option value="city_2">City 2</option>
														<option value="city_3">City 3</option>
														<option value="city_4">City 4</option>
														<option value="city_5">City 5</option>                             
													</select>
												</div>
											</div>
										</div>
										
										<div class="row">
											<div class="col-sm-6">
												<div class="form-group">
													<input type="text" name="address" class="form-control required" placeholder="Your Address">
												</div>
											</div>
											<div class="col-sm-3">
												<div class="form-group">
													<input type="text" name="age" class="form-control" placeholder="Age">
												</div>
											</div>
											<div class="col-sm-3">
												<div class="form-group radio_input">
													<label class="container_radio">Male
														<input type="radio" name="gender" value="Male" class="required">
														<span class="checkmark"></span>
													</label>
													<label class="container_radio">Female
														<input type="radio" name="gender" value="Female" class="required">
														<span class="checkmark"></span>
													</label>
												</div>
											</div>
										</div>
										<!-- /row -->
										<div class="form-group terms">
											<label class="container_check">Please accept our <a href="#" data-bs-toggle="modal" data-bs-target="#terms-txt">Terms and conditions</a>
												<input type="checkbox" name="terms" value="Yes" class="required">
												<span class="checkmark"></span>
											</label>
										</div>
									</div>
									<!-- /step-->
									<div class="step">
										<h3 class="main_question"><strong>2/4</strong>Make a Multiple Choice Test Template Using Excel</h3>
										<div class="form-group">
											<label class="container_radio version_2">Activate Developer Tab
												<input type="radio" name="question_1" value="Activate Developer Tab" class="required" onchange="getVals(this, 'question_1');">
												<span class="checkmark"></span>
											</label>
										</div>
										<div class="form-group">
											<label class="container_radio version_2">Providing a Lecturer
												<input type="radio" name="question_1" value="Providing a Lecturer" class="required" onchange="getVals(this, 'question_1');">
												<span class="checkmark"></span>
											</label>
										</div>
										<div class="form-group">
											<label class="container_radio version_2">Personally Quizzes
												<input type="radio" name="question_1" value="Personally Quizzes" class="required" onchange="getVals(this, 'question_1');">
												<span class="checkmark"></span>
											</label>
										</div>
										<div class="form-group">
											<label class="container_radio version_2">Massive Batches
												<input type="radio" name="question_1" value="Massive Batches" class="required" onchange="getVals(this, 'question_1');">
												<span class="checkmark"></span>
											</label>
										</div>

										<div class="form-group">
											<label class="container_radio version_2">Extremely Satisfied
												<input type="radio" name="question_1" value="Extremely Satisfied" class="required" onchange="getVals(this, 'question_1');">
												<span class="checkmark"></span>
											</label>
										</div>
									</div>
									<!-- /step-->
									<div class="step">
										<h3 class="main_question"><strong>3/4</strong>Select What Suits you Best and Help us Improve Our Services.</h3>
										<div class="form-group">
											<label class="container_check version_2">Fronted Developer
												<input type="checkbox" name="question_2[]" value="Fronted Developer" class="required" onchange="getVals(this, 'question_2');">
												<span class="checkmark"></span>
											</label>
										</div>
										<div class="form-group">
											<label class="container_check version_2">Web Designer
												<input type="checkbox" name="question_2[]" value="Web Designer" class="required" onchange="getVals(this, 'question_2');">
												<span class="checkmark"></span>
											</label>
										</div>
										<div class="form-group">
											<label class="container_check version_2">Full Stack Developer
												<input type="checkbox" name="question_2[]" value="Full Stack Developer" class="required" onchange="getVals(this, 'question_2');">
												<span class="checkmark"></span>
											</label>
										</div>
										<div class="form-group">
											<label class="container_check version_2">Backend Developer
												<input type="checkbox" name="question_2[]" value="Backend Developer" class="required" onchange="getVals(this, 'question_2');">
												<span class="checkmark"></span>
											</label>
										</div>
										<div class="form-group">
											<label class="container_check version_2">Other
												<input type="checkbox" name="question_2[]" value="Other" class="required" onchange="getVals(this, 'question_2');">
												<span class="checkmark"></span>
											</label>
										</div>
										<div class="form-group">
											<label>In no, please describe with few words why</label>
											<textarea name="additional_message" class="form-control" style="height:100px;" placeholder="Type here additional info..." onkeyup="getVals(this, 'additional_message');"></textarea>
										</div>
									</div>

									<!-- /step-->
									<div class="submit step result-before-submit">
										<h3 class="main_question"><strong>4/4</strong>Summary</h3>
										<div class="summary">
											<ul>
												<li><strong>1</strong>
													<h5>Make a Multiple Choice Test Template Using Excel</h5>
													<p id="question_1"></p>
												</li>
												<li><strong>2</strong>
													<h5>Select What Suits you Best and Help us Improve Our Services.</h5>
													<p id="question_2"></p>
													<p id="additional_message"></p>
												</li>
											</ul>
										</div>
									</div>
									<!-- /step-->
								</div>
								<!-- /middle-wizard -->
								<div id="bottom-wizard">
									<button type="button" name="backward" class="backward">Prev</button>
									<button type="button" name="forward" class="forward">Next</button>
									<button type="submit" name="process" class="submit">Submit</button>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>





@endsection

@push("js")
<script>
    $(document).ready(function () {
        $('#enquiry-form').submit(function (e) {
            e.preventDefault();
            var formData = $(this).serialize();
            var response = "";
            $.ajax({
                type: 'POST',
                url: '<?php echo route("registration.submit"); ?>',
                data: formData,
                success: function (response) {
                    // fbq('trackCustom', 'EventRegistration', {promotion: 'astro_solutions'});
                    //  fbq('track', 'PageView');
                    if (response.status) {
                        $('#registration-id').text(response.registration_id);
                        $('#success-modal-label').text("Registration is successful");
                        $('#success-modal-qr').html("<p class='text-center' style='    text-align: center!important;background-color: #830404;color: white;padding: 10px;font-weight: 600;'>Please download/save this Nirvana Australian Education Fest PASS. You must present this to participate in the event.</p><img src='" + response.qr_code + "' class='img-fluid' />");
                        var downloadLink = document.createElement('a');
                        downloadLink.href = response.qr_code;
                        downloadLink.download = 'nirvana_australian_edcation_fest_qrcode.png'; // Set the desired file name
                        //    downloadLink.click();
                        $('#success-modal').modal('show');
                        $form[0].reset();
                    } else if (response.message == 'Mobile number already exists. Returning existing data.') {
                        var existingRegistrationData = response.registration;
                        //$('#modal-text-area').html(JSON.stringify(existingRegistrationData));
                        var downloadLink = document.createElement('a');
                        downloadLink.href = response.qr_code;
                        downloadLink.download = 'nirvana_australian_edcation_fest_qrcode.png'; // Set the desired file name
                        //downloadLink.click();
                        $('#success-modal-label').text(response.message);
                        $('#success-modal-qr').html("<img src='" + response.qr_code + "' class='img-fluid' />");
                        $('#success-modal').modal('show');
                    } else {
                        var errorMessages = '';
                        $.each(response.errors, function (field, errors) {
                            errorMessages += errors.join('<br>');
                        });
                        $('#error-modal .modal-body').html(errorMessages);
                        $('#error-modal').modal('show');
                    }
                }
            });
        });

        $('#success-modal').on('hidden.bs.modal', function () {
            $('#enquiry-form')[0].reset(); // Reset the form
        });
        $('#downloadButton').on('click', function () {
            // Trigger the download when the button is clicked
            var downloadLink = document.createElement('a');
            downloadLink.href = $('#success-modal-qr img').attr('src');
            downloadLink.download = 'nirvana_australian_edcation_fest_qrcode.png';
            downloadLink.click();
        });
    });
</script>
@endpush