feat: Implement multi-step cost calculator with dynamic form handling and styling enhancements
This commit is contained in:
@@ -1,4 +1,120 @@
|
||||
@extends('client.raffles.layouts.app')
|
||||
|
||||
@push('css')
|
||||
<style>
|
||||
.wizard-container {
|
||||
max-width: 700px;
|
||||
margin: auto;
|
||||
background: #fff;
|
||||
padding: 30px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.wizard-container .step-title {
|
||||
font-size: 22px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.wizard-container .step-subtitle {
|
||||
font-size: 14px;
|
||||
color: #555;
|
||||
margin-bottom: 20px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.wizard-container .tab-pane {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wizard-container .tab-pane.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.wizard-container .form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.wizard-container .form-control,
|
||||
select {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.wizard-container .btn {
|
||||
padding: 10px 20px;
|
||||
background: #007bff;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.wizard-container .btn:disabled {
|
||||
background: #ccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.wizard-container .btn-prev {
|
||||
background: #6c757d;
|
||||
}
|
||||
|
||||
.wizard-container .form-check {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.wizard-container .d-none {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wizard-container .nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.wizard-container .nav button {
|
||||
flex: 1;
|
||||
margin: 0 2px;
|
||||
padding: 8px;
|
||||
background: #e9ecef;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.wizard-container .nav button.active {
|
||||
background: #007bff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.wizard-container .text-danger {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.wizard-container .card-radio {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 10px;
|
||||
padding: 15px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
min-width: 120px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wizard-container .card-radio:hover {
|
||||
border-color: #0d6efd;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.wizard-container .card-radio.active {
|
||||
border-color: #0d6efd;
|
||||
background-color: #e7f1ff;
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<section class="about section-fall" id="ball-section">
|
||||
<canvas id="flagCanvas"></canvas>
|
||||
@@ -13,315 +129,147 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="lqd-section pb-160">
|
||||
<section class="lqd-section pb-160">
|
||||
<div class="container">
|
||||
<div class="row" id="interactiveSection">
|
||||
|
||||
<div class="col col-lg-7">
|
||||
<div class="col col-lg-12">
|
||||
|
||||
{{-- <form id="costForm" action="{{ route('cost.calculator') }}" method="POST">
|
||||
@csrf
|
||||
<input type="hidden" name="country_id" id="country_id">
|
||||
<input type="hidden" name="test_id" id="test_id">
|
||||
<input type="hidden" name="intake_id" id="intake_id">
|
||||
<input type="hidden" name="programlevel_id" id="programlevel_id"> --}}
|
||||
|
||||
<div class="cost-choosing">
|
||||
|
||||
<div class="step-content active" id="step1">
|
||||
<h3 class="text-20 text-black font-bold pb-20">Choose items to find the total cost</h3>
|
||||
<h5 class="text-ter text-18 font-medium pb-20">Which country are you planning to study
|
||||
in?</h5>
|
||||
|
||||
<div class="row flex py-20">
|
||||
@foreach ($countryOptions as $id => $country)
|
||||
<div class="col col-sm-4">
|
||||
<div class="flex items-center gap-10 px-10 py-20 bg-white rounded-30 tabs">
|
||||
<div class="circle1"></div>
|
||||
<a href="#" class="select-country" data-id="{{ $id }}">
|
||||
<h3 class="text-20 text-ter p-0 m-0">{{ $country }}</h3>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
<div class="wizard-container">
|
||||
<div class="nav" id="step-nav">
|
||||
<button class="active" data-step="0">Country</button>
|
||||
<button data-step="1">Stay Type</button>
|
||||
<button data-step="2">Other Services</button>
|
||||
<button data-step="3">Program Level</button>
|
||||
<button data-step="4">Program</button>
|
||||
</div>
|
||||
|
||||
<div class="step-content" id="step2">
|
||||
<h3 class="text-20 text-black font-bold pb-20">Choose items to find the total cost</h3>
|
||||
<h5 class="text-ter text-18 font-medium pb-20">Which level are you applying for?</h5>
|
||||
<form id="multiStepForm">
|
||||
|
||||
<div class="row flex py-20">
|
||||
@foreach ($programLevelOptions as $id => $level)
|
||||
<div class="col col-sm-4">
|
||||
<div class="flex items-center gap-10 px-10 py-20 bg-white rounded-30 tabs">
|
||||
<div class="circle1"></div>
|
||||
<a href="#" class="select-programlevel_id"
|
||||
data-id="{{ $id }}">
|
||||
<h3 class="text-20 text-ter p-0 m-0">{{ $level }}</h3>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step-content" id="step3">
|
||||
<h3 class="text-20 text-black font-bold pb-20">Choose items to find the total cost</h3>
|
||||
<h5 class="text-ter text-18 font-medium pb-20">Are you going alone or with a dependent?
|
||||
</h5>
|
||||
|
||||
<div class="row flex py-20">
|
||||
<div class="col col-sm-4">
|
||||
<div class="flex items-center gap-10 px-10 py-20 bg-white rounded-30 tabs">
|
||||
<div class="circle1"></div>
|
||||
<a href="#" class="select-intake" data-id="">
|
||||
<h3 class="text-20 text-ter p-0 m-0">Alone</h3>
|
||||
</a>
|
||||
<!-- Step 1: Select Country -->
|
||||
<div class="tab-pane active" data-step="0">
|
||||
<h2 class="step-title">Which country are you planning to study in?</h2>
|
||||
<div class="form-group">
|
||||
<div class="d-flex flex-wrap">
|
||||
@foreach ($countries as $country)
|
||||
<div class="form-check country-card me-3 mb-3">
|
||||
<input class="form-check-input" type="radio" name="country"
|
||||
value="{{ $country->id }}" id="country_{{ $country->id }}">
|
||||
<label class="form-check-label" for="country_{{ $country->id }}">
|
||||
{{ $country->title }}
|
||||
</label>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
<div class="col col-sm-4">
|
||||
<div class="flex items-center gap-10 px-10 py-20 bg-white rounded-30 tabs">
|
||||
<div class="circle1"></div>
|
||||
<a href="#" class="select-intake" data-id="">
|
||||
<h3 class="text-20 text-ter p-0 m-0">With Spouse</h3>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col col-sm-4">
|
||||
<div class="flex items-center gap-10 px-10 py-20 bg-white rounded-30 tabs">
|
||||
<div class="circle1"></div>
|
||||
<a href="#" class="select-intake" data-id="">
|
||||
<h3 class="text-20 text-ter p-0 m-0">With Spouse + 1 Child</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div style="text-align:right;">
|
||||
<button type="button" class="btn btn-next">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step-content" id="step4">
|
||||
<h3 class="text-20 text-black font-bold pb-20">Choose items to find the total cost</h3>
|
||||
<h5 class="text-ter text-18 font-medium pb-20">Cost of Living</h5>
|
||||
|
||||
<div class="row flex py-20">
|
||||
<div class="col col-sm-4">
|
||||
<div class="flex items-center gap-10 px-10 py-20 bg-white rounded-30 tabs">
|
||||
<div class="circle1"></div>
|
||||
<a href="#" class="select-year" data-id="1">
|
||||
<h3 class="text-20 text-ter p-0 m-0">UK £829 / £9948</h3>
|
||||
</a>
|
||||
<!-- Step 2: Stay Type Status -->
|
||||
<div class="tab-pane" data-step="1">
|
||||
<h2 class="step-title">Are you going alone or with a dependent?</h2>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="d-flex flex-wrap">
|
||||
@foreach ($livingStatusOptions as $key => $status)
|
||||
<div class="form-check status-card me-3 mb-3">
|
||||
<input class="form-check-input" type="radio" name="status_type"
|
||||
value="{{ $key }}" id="status_type_{{ $key }}">
|
||||
<label class="form-check-label" for="status_type_{{ $key }}">
|
||||
{{ $status }}
|
||||
</label>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
<div class="col col-sm-4">
|
||||
<div class="flex items-center gap-10 px-10 py-20 bg-white rounded-30 tabs">
|
||||
<div class="circle2"></div>
|
||||
<a href="#" class="select-year" data-id="2">
|
||||
<h3 class="text-20 text-ter p-0 m-0">US $1,189 / $14268</h3>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col col-sm-4">
|
||||
<div class="flex items-center gap-10 px-10 py-10 bg-white rounded-30 tabs">
|
||||
<div class="circle1"></div>
|
||||
<a href="#" class="select-year" data-id="3">
|
||||
<h3 class="text-20 text-ter p-0 m-0">AU $1,049 / $12588</h3>
|
||||
</a>
|
||||
</div>
|
||||
<div style="display:flex; justify-content:space-between;">
|
||||
<button type="button" class="btn btn-prev">Previous</button>
|
||||
<button type="button" class="btn btn-next">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step-content" id="step5">
|
||||
<h3 class="text-20 text-black font-bold pb-20">Choose items to find the total cost</h3>
|
||||
<h5 class="text-ter text-18 font-medium pb-20">Accomodation cost per year:</h5>
|
||||
<!-- Step 3: Proficiency -->
|
||||
<div class="tab-pane" data-step="2">
|
||||
<h2 class="step-title">Do you want to include other services?</h2>
|
||||
|
||||
<div class="row flex py-20">
|
||||
<div class="col col-sm-4">
|
||||
<div class="flex items-center gap-10 px-10 py-20 bg-white rounded-30 tabs">
|
||||
<div class="circle1"></div>
|
||||
<a href="#" class="select-programlevel_id" data-id="">
|
||||
<h3 class="text-20 text-ter p-0 m-0">UK £1,079 / £12,948</h3>
|
||||
</a>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="radio" name="services" id="yes" value="yes"> <label
|
||||
for="yes">Yes</label>
|
||||
<input type="radio" name="services" id="no" value="no"> <label
|
||||
for="no">No</label>
|
||||
</div>
|
||||
<div class="col col-sm-4">
|
||||
<div class="flex items-center gap-10 px-10 py-20 bg-white rounded-30 tabs">
|
||||
<div class="circle1"></div>
|
||||
<a href="#" class="select-programlevel_id" data-id="">
|
||||
<h3 class="text-20 text-ter p-0 m-0">US $1,637 / $19,644</h3>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col col-sm-4">
|
||||
<div class="flex items-center gap-10 px-10 py-20 bg-white rounded-30 tabs">
|
||||
<div class="circle1"></div>
|
||||
<a href="#" class="select-programlevel_id" data-id="">
|
||||
<h3 class="text-20 text-ter p-0 m-0">AU $2700 / $32400</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div style="display:flex; justify-content:space-between;">
|
||||
<button type="button" class="btn btn-prev">Previous</button>
|
||||
<button type="button" class="btn btn-next">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step-content" id="step6">
|
||||
<h3 class="text-20 text-black font-bold pb-20">Choose items to find the total cost</h3>
|
||||
<h5 class="text-ter text-18 font-medium pb-20">Non-Refundable onetime cost in
|
||||
processing:</h5>
|
||||
<!-- Step 4: Basic -->
|
||||
<div class="tab-pane" data-step="3">
|
||||
<h2 class="step-title">Which Level are you applying for?</h2>
|
||||
|
||||
<div class="row flex py-20">
|
||||
<div class="col col-sm-4">
|
||||
<div class="flex items-center gap-10 px-10 py-20 bg-white rounded-30 tabs">
|
||||
<div class="circle1"></div>
|
||||
<a href="#" class="select-programlevel_id" data-id="">
|
||||
<h3 class="text-20 text-ter p-0 m-0">UK 2 to 3 Lakhs</h3>
|
||||
</a>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
@foreach ($programLevelOptions as $level)
|
||||
<input type="radio" name="program_level" id="program_level_id"
|
||||
value="program_level_id"> <label
|
||||
for="program_level_id">{{ $level }}</label>
|
||||
@endforeach
|
||||
</div>
|
||||
<div class="col col-sm-4">
|
||||
<div class="flex items-center gap-10 px-10 py-20 bg-white rounded-30 tabs">
|
||||
<div class="circle1"></div>
|
||||
<a href="#" class="select-programlevel_id" data-id="">
|
||||
<h3 class="text-20 text-ter p-0 m-0">AU 5 to 7 Lakhs</h3>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col col-sm-4">
|
||||
<div class="flex items-center gap-10 px-10 py-20 bg-white rounded-30 tabs">
|
||||
<div class="circle1"></div>
|
||||
<a href="#" class="select-programlevel_id" data-id="">
|
||||
<h3 class="text-20 text-ter p-0 m-0">USA 1 to 2 Lakh</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div style="display:flex; justify-content:space-between;">
|
||||
<button type="button" class="btn btn-prev">Previous</button>
|
||||
<button type="button" class="btn btn-next">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step-content" id="step7">
|
||||
<h3 class="text-20 text-black font-bold pb-20">Choose items to find the total cost</h3>
|
||||
<h5 class="text-ter text-18 font-medium pb-20">Do you want to include other services?
|
||||
</h5>
|
||||
<!-- Step 5: Contact -->
|
||||
<div class="tab-pane" data-step="4">
|
||||
<h2 class="step-title">Which Program are you applying for?</h2>
|
||||
|
||||
<div class="row flex py-20">
|
||||
<div class="col col-sm-4">
|
||||
<div class="flex items-center gap-10 px-10 py-20 bg-white rounded-30 tabs">
|
||||
<div class="circle1"></div>
|
||||
<a href="#" class="select-programlevel_id" data-id="">
|
||||
<h3 class="text-20 text-ter p-0 m-0">Flighr Ticket</h3>
|
||||
</a>
|
||||
<div class="form-group">
|
||||
<div class="d-flex flex-wrap">
|
||||
@foreach ($programss as $key => $program)
|
||||
<select name="country_id" class="form-control" required>
|
||||
<option value="">Select Program</option>
|
||||
<option value="{{ $key }}">{{ $program }}</option>
|
||||
</select>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
<div class="col col-sm-4">
|
||||
<div class="flex items-center gap-10 px-10 py-20 bg-white rounded-30 tabs">
|
||||
<div class="circle1"></div>
|
||||
<a href="#" class="select-programlevel_id" data-id="">
|
||||
<h3 class="text-20 text-ter p-0 m-0">Health Insurance</h3>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col col-sm-4">
|
||||
<div class="flex items-center gap-10 px-10 py-20 bg-white rounded-30 tabs">
|
||||
<div class="circle1"></div>
|
||||
<a href="#" class="select-programlevel_id" data-id="">
|
||||
<h3 class="text-20 text-ter p-0 m-0">Extra</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div style="display:flex; justify-content:space-between;">
|
||||
<button type="button" class="btn btn-prev">Previous</button>
|
||||
<button type="submit" class="btn btn-next">Finish</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class=" flex items-center justify-center next-btn">
|
||||
<button id="nextBtn"
|
||||
class="rounded-30 px-20 py-10 text-ter text-16 text-center border-0 flex items-center gap-10 justify-center">
|
||||
<p class="m-0 p-0">Next</p> <i class="fa-solid fa-chevron-right"></i>
|
||||
</button>
|
||||
<button id="doneBtn" type="submit" style="display: none;">Done</button>
|
||||
</div>
|
||||
|
||||
<div class="progress-line">
|
||||
<div class="progress-track">
|
||||
<span class="banana" id="b1">
|
||||
<div class="dot"
|
||||
style="width:12px;height:12px;background:#999;border-radius:50%;"></div>
|
||||
</span>
|
||||
<span class="banana" id="b2">
|
||||
<div class="dot"
|
||||
style="width:12px;height:12px;background:#999;border-radius:50%;"></div>
|
||||
</span>
|
||||
<span class="banana" id="b3">
|
||||
<div class="dot"
|
||||
style="width:12px;height:12px;background:#999;border-radius:50%;"></div>
|
||||
</span>
|
||||
<span class="banana" id="b4">
|
||||
<div class="dot"
|
||||
style="width:12px;height:12px;background:#999;border-radius:50%;"></div>
|
||||
</span>
|
||||
<span class="banana" id="b5">
|
||||
<div class="dot"
|
||||
style="width:12px;height:12px;background:#999;border-radius:50%;"></div>
|
||||
</span>
|
||||
<span class="banana" id="b6">
|
||||
<div class="dot"
|
||||
style="width:12px;height:12px;background:#999;border-radius:50%;"></div>
|
||||
</span>
|
||||
<span class="banana" id="b7">
|
||||
<div class="dot"
|
||||
style="width:12px;height:12px;background:#999;border-radius:50%;"></div>
|
||||
</span>
|
||||
</div>
|
||||
<div class="monkey" id="monkey" style="left: 0%;">
|
||||
<img src="{{ asset('raffles/assets/images/icons/monkey.png') }}" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
{{-- </form> --}}
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col col-lg-1"></div>
|
||||
|
||||
<div class="col col-lg-4">
|
||||
{{-- <div class="col col-lg-4">
|
||||
<div class="total-cost">
|
||||
<h4>Total <span class="text-black">Cost</span> </h4>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="font-bold">S.N.</th>
|
||||
<th class="font-bold ">Select</th>
|
||||
<th class="font-bold ">Max Price</th>
|
||||
<th class="font-bold">Select</th>
|
||||
<th class="font-bold">Max Price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Bachelors</td>
|
||||
<td>$13000/year</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Bachelors</td>
|
||||
<td>$13000/year</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Bachelors</td>
|
||||
<td>$13000/year</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>Bachelors</td>
|
||||
<td>$13000/year</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>Bachelors</td>
|
||||
<td>$13000/year</td>
|
||||
</tr>
|
||||
<tbody id="totalCostBody">
|
||||
<!-- Filled dynamically -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div> --}}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -329,27 +277,75 @@
|
||||
|
||||
</section>
|
||||
@endsection
|
||||
|
||||
{{-- @push('js')
|
||||
@push('js')
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
const map = {
|
||||
'select-country': 'country_id',
|
||||
'select-test': 'test_id',
|
||||
'select-intake': 'intake_id',
|
||||
'select-programlevel_id': 'programlevel_id'
|
||||
};
|
||||
const form = document.getElementById('multiStepForm');
|
||||
const tabs = document.querySelectorAll('.tab-pane');
|
||||
const nextBtns = document.querySelectorAll('.btn-next');
|
||||
const prevBtns = document.querySelectorAll('.btn-prev');
|
||||
const navButtons = document.querySelectorAll('#step-nav button');
|
||||
|
||||
$(document).on('click', 'a', function(e) {
|
||||
const classes = $(this).attr('class')?.split(/\s+/) || [];
|
||||
for (const cls of classes) {
|
||||
if (map[cls]) {
|
||||
e.preventDefault();
|
||||
$('#' + map[cls]).val($(this).data('id'));
|
||||
break;
|
||||
}
|
||||
let currentStep = 0;
|
||||
|
||||
function showStep(step) {
|
||||
tabs.forEach((tab, idx) => {
|
||||
tab.classList.toggle('active', idx === step);
|
||||
});
|
||||
navButtons.forEach((btn, idx) => {
|
||||
btn.classList.toggle('active', idx === step);
|
||||
});
|
||||
}
|
||||
|
||||
nextBtns.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
if (currentStep < tabs.length - 1) {
|
||||
currentStep++;
|
||||
showStep(currentStep);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
prevBtns.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
if (currentStep > 0) {
|
||||
currentStep--;
|
||||
showStep(currentStep);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
navButtons.forEach((btn, idx) => {
|
||||
btn.addEventListener('click', () => {
|
||||
currentStep = idx;
|
||||
showStep(currentStep);
|
||||
});
|
||||
});
|
||||
|
||||
// Proficiency test toggle
|
||||
const yesRadio = document.getElementById('yes');
|
||||
const noRadio = document.getElementById('no');
|
||||
const testDetailsGroup = document.getElementById('testDetailsGroup');
|
||||
const testScoreGroup = document.getElementById('testScoreGroup');
|
||||
const consideringGroup = document.getElementById('consideringGroup');
|
||||
|
||||
function toggleProficiencySections() {
|
||||
if (yesRadio.checked) {
|
||||
testDetailsGroup.classList.remove('d-none');
|
||||
testScoreGroup.classList.remove('d-none');
|
||||
consideringGroup.classList.add('d-none');
|
||||
} else if (noRadio.checked) {
|
||||
testDetailsGroup.classList.add('d-none');
|
||||
testScoreGroup.classList.add('d-none');
|
||||
consideringGroup.classList.remove('d-none');
|
||||
} else {
|
||||
testDetailsGroup.classList.add('d-none');
|
||||
testScoreGroup.classList.add('d-none');
|
||||
consideringGroup.classList.add('d-none');
|
||||
}
|
||||
}
|
||||
|
||||
yesRadio.addEventListener('change', toggleProficiencySections);
|
||||
noRadio.addEventListener('change', toggleProficiencySections);
|
||||
toggleProficiencySections();
|
||||
</script>
|
||||
@endpush --}}
|
||||
@endpush
|
||||
|
||||
Reference in New Issue
Block a user