393 lines
17 KiB
PHP
393 lines
17 KiB
PHP
@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>
|
|
<div class="study-destinations-banner">
|
|
<img src="{{ asset('raffles/assets/images/backgrounds_general/cost-calc.png') }}" alt="">
|
|
</div>
|
|
|
|
<section class="section ">
|
|
<div class="flex flex-col gap-5 justify-center items-center text-center">
|
|
<h2 class="text-60 md:text-30 text-sec">Cost Calculator</h2>
|
|
<div class="title-line mx-auto"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="lqd-section pb-160">
|
|
<div class="container">
|
|
|
|
<div class="row justify-center flex" id="interactiveSection">
|
|
|
|
|
|
<div class="col col-lg-7">
|
|
<form id="cost-calculator" method="GET" action="{{ route('cost.getCost') }}">
|
|
<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">Where do you want to study</h5>
|
|
|
|
<div class="row flex flex-wrap py-20">
|
|
@foreach ($countries as $country)
|
|
<div class="col col-sm-4">
|
|
<div class="flex items-center gap-10 px-10 py-12 bg-white rounded-30 tabs">
|
|
<input type="radio" name="country_id" value="{{ $country->id }}"
|
|
id="{{ $country->id }}">
|
|
|
|
<label class="text-20 text-ter p-0 m-0"
|
|
for="country1">{{ $country->title }}</label>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</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">Are you going alone or with a dependent?
|
|
</h5>
|
|
|
|
<div class="row flex flex-wrap py-20">
|
|
@foreach ($livingStatusOptions as $key => $status)
|
|
<div class="col col-sm-6">
|
|
<div class="flex items-center gap-10 px-10 py-12 bg-white rounded-30 tabs">
|
|
<input type="radio" name="status_type_id" value="{{ $key }}"
|
|
id="status_type_{{ $key }}">
|
|
<label class="text-20 text-ter p-0 m-0"
|
|
for="alone">{{ $status }}</label>
|
|
</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">Do you want to include other services?
|
|
</h5>
|
|
|
|
<div class="row flex flex-wrap py-20">
|
|
<div class="col col-sm-4">
|
|
<div class="flex items-center gap-10 px-10 py-12 bg-white rounded-30 tabs">
|
|
<input name="services" type="radio" id="serviceYes">
|
|
|
|
<label class="text-20 text-ter p-0 m-0" for="serviceYes">Yes</label>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
<div class="col col-sm-4">
|
|
<div class="flex items-center gap-10 px-10 py-12 bg-white rounded-30 tabs">
|
|
<input name="services" type="radio" id="serviceNo">
|
|
|
|
<label class="text-20 text-ter p-0 m-0" for="serviceNo">No</label>
|
|
|
|
|
|
</div>
|
|
</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">Which Level are you applying for?</h5>
|
|
|
|
<div class="row flex flex-wrap py-20">
|
|
@foreach ($programLevelOptions as $level)
|
|
<div class="col col-sm-4">
|
|
<div class="flex items-center gap-10 px-10 py-12 bg-white rounded-30 tabs">
|
|
<input type="radio" name="" id="" value="">
|
|
<label for="program_level_id">
|
|
<label class="text-20 text-ter p-0 m-0"
|
|
for="bachelors">{{ $level }}</label>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</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">Which Program are you applying for?</h5>
|
|
|
|
<div class="row flex py-20">
|
|
<div class="col col-sm-12">
|
|
<div class="flex items-center gap-10 px-10 py-12 bg-white rounded-30 tabs">
|
|
@foreach ($programss as $key => $program)
|
|
<select name="program_id" class="cost-select" id="">
|
|
<option value="">Select Program</option>
|
|
<option value="{{ $key }}">{{ $program }}</option>
|
|
</select>
|
|
@endforeach
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class=" flex items-center justify-center next-btn">
|
|
<button id="prevBtn" type="button"
|
|
class="rounded-30 px-20 py-10 text-ter text-16 text-center border-0 flex items-center gap-10 justify-center mr-5">
|
|
<i class="fa-solid fa-chevron-left"></i>
|
|
<p class="m-0 p-0">Previous</p>
|
|
</button>
|
|
<button id="nextBtn" type="button"
|
|
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 type="submit" id="doneBtn" style="display: none;"
|
|
class="rounded-30 px-20 py-10 text-ter text-16 text-center border-0 flex items-center gap-10 justify-center mr-5">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"><img
|
|
src=" {{ asset('raffles/assets/images/icons/bananas.svg') }}"
|
|
alt=""></span>
|
|
</div>
|
|
<div class="monkey" id="monkey" style="left: 0%;"><img
|
|
src="{{ asset('raffles\assets\images\icons\monkey.png') }}" alt="">
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</form>
|
|
|
|
|
|
</div>
|
|
|
|
{{-- <div class="col col-lg-1"></div>
|
|
|
|
<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>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="totalCostBody">
|
|
<!-- Filled dynamically -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div> --}}
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</section>
|
|
|
|
</section>
|
|
@endsection
|
|
@push('js')
|
|
{{-- <script>
|
|
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');
|
|
|
|
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
|