feat: Implement multi-step cost calculator with dynamic form handling and styling enhancements
This commit is contained in:
@@ -3,6 +3,7 @@
|
|||||||
namespace Modules\CostCalculator\Services;
|
namespace Modules\CostCalculator\Services;
|
||||||
|
|
||||||
use Modules\CostCalculator\Models\CostCalculator;
|
use Modules\CostCalculator\Models\CostCalculator;
|
||||||
|
use Modules\CourseFinder\Models\Program;
|
||||||
|
|
||||||
class CostCalculatorService
|
class CostCalculatorService
|
||||||
{
|
{
|
||||||
@@ -13,20 +14,12 @@ class CostCalculatorService
|
|||||||
$query->where('country_id', $request->country_id);
|
$query->where('country_id', $request->country_id);
|
||||||
}
|
}
|
||||||
|
|
||||||
if ($request->filled('programlevel_id')) {
|
if ($request->filled('stay_type_id')) {
|
||||||
$query->where("programlevel_id", $request->programlevel_id);
|
$query->where("stay_type_id", $request->stay_type_id);
|
||||||
}
|
}
|
||||||
|
|
||||||
if ($request->filled('program_id')) {
|
if ($request->filled('program_id')) {
|
||||||
$query->where("program_id", $request->program_id);
|
Program::where('status', 1)-> where('id', $request->program_id)->get();
|
||||||
}
|
|
||||||
|
|
||||||
if ($request->filled('living_status_id')) {
|
|
||||||
$query->where("living_status_id", $request->living_status_id);
|
|
||||||
}
|
|
||||||
|
|
||||||
if ($request->filled('status')) {
|
|
||||||
$query->where('status', $request->status);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
})->latest()->paginate(10)->withQueryString();
|
})->latest()->paginate(10)->withQueryString();
|
||||||
|
|||||||
@@ -10,6 +10,8 @@ use Modules\CCMS\Models\Institution;
|
|||||||
use Modules\CCMS\Models\Page;
|
use Modules\CCMS\Models\Page;
|
||||||
use Modules\CCMS\Models\Service;
|
use Modules\CCMS\Models\Service;
|
||||||
use Modules\CCMS\Models\Test;
|
use Modules\CCMS\Models\Test;
|
||||||
|
use Modules\CostCalculator\Models\CostCalculator;
|
||||||
|
use Modules\CostCalculator\Models\StayType;
|
||||||
use Modules\CourseFinder\Models\Coop;
|
use Modules\CourseFinder\Models\Coop;
|
||||||
use Modules\CourseFinder\Models\Program;
|
use Modules\CourseFinder\Models\Program;
|
||||||
use Modules\CourseFinder\Models\ProgramLevel;
|
use Modules\CourseFinder\Models\ProgramLevel;
|
||||||
@@ -243,13 +245,65 @@ class WebsiteController extends Controller
|
|||||||
public function costCalculator(Request $request)
|
public function costCalculator(Request $request)
|
||||||
{
|
{
|
||||||
$data['programs'] = $this->programService->findAll($request);
|
$data['programs'] = $this->programService->findAll($request);
|
||||||
|
$data['programss'] = Program::where('status', 1)->pluck('title', 'id');
|
||||||
$data['countryOptions'] = Country::where('status', 1)->where('parent_id', null)->pluck('title', 'id');
|
$data['countryOptions'] = Country::where('status', 1)->where('parent_id', null)->pluck('title', 'id');
|
||||||
$data['programLevelOptions'] = ProgramLevel::where('status', 1)->pluck('title', 'id');
|
$data['programLevelOptions'] = ProgramLevel::where('status', 1)->pluck('title', 'id');
|
||||||
$data['intakeOptions'] = Program::INTAKE;
|
$data['intakeOptions'] = Program::INTAKE;
|
||||||
$data['coopOptions'] = Coop::where('status', 1)->pluck('title', 'id');
|
$data['coopOptions'] = Coop::where('status', 1)->pluck('title', 'id');
|
||||||
$data['testOptions'] = Test::where('status', 1)->where('parent_id', null)->pluck('title', 'id');
|
$data['testOptions'] = Test::where('status', 1)->where('parent_id', null)->pluck('title', 'id');
|
||||||
$data['statusOptions'] = config('constants.page_status_options');
|
$data['livingStatusOptions'] = StayType::where('status', 1)->pluck('title', 'id');
|
||||||
|
|
||||||
|
|
||||||
return view("client.raffles.pages.cost-calculator", $data);
|
return view("client.raffles.pages.cost-calculator", $data);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public function getCost(Request $request, $id)
|
||||||
|
{
|
||||||
|
$cost = CostCalculator::with([
|
||||||
|
'stayTypeLiving',
|
||||||
|
'stayTypeAccomodation',
|
||||||
|
'stayTypeOnetime',
|
||||||
|
'stayTypeService'
|
||||||
|
])->findOrFail($id);
|
||||||
|
|
||||||
|
$data['title'] = 'View Cost Calculation';
|
||||||
|
$data['cost'] = $cost;
|
||||||
|
|
||||||
|
$getBreakdown = function ($stayTypeTitle) use ($cost) {
|
||||||
|
$living = optional($cost->stayTypeLiving->firstWhere('title', $stayTypeTitle))->pivot;
|
||||||
|
$accomodation = optional($cost->stayTypeAccomodation->firstWhere('title', $stayTypeTitle))->pivot;
|
||||||
|
$onetime = optional($cost->stayTypeOnetime->firstWhere('title', $stayTypeTitle))->pivot;
|
||||||
|
$service = optional($cost->stayTypeService->firstWhere('title', $stayTypeTitle))->pivot;
|
||||||
|
|
||||||
|
return [
|
||||||
|
'living' => [
|
||||||
|
'monthly' => $living->monthly ?? 0,
|
||||||
|
'yearly' => $living->yearly ?? 0,
|
||||||
|
],
|
||||||
|
'accomodation' => [
|
||||||
|
'monthly' => $accomodation->monthly ?? 0,
|
||||||
|
'yearly' => $accomodation->yearly ?? 0,
|
||||||
|
],
|
||||||
|
'onetime' => [
|
||||||
|
'visa' => $onetime->visa ?? 0,
|
||||||
|
'biometrics' => $onetime->biometrics ?? 0,
|
||||||
|
'sevis' => $onetime->sevis ?? 0,
|
||||||
|
'application' => $onetime->application ?? 0,
|
||||||
|
'total' => ($onetime->visa ?? 0) + ($onetime->biometrics ?? 0) + ($onetime->sevis ?? 0) + ($onetime->application ?? 0),
|
||||||
|
],
|
||||||
|
'service' => [
|
||||||
|
'flight_ticket' => $service->flight_ticket ?? 0,
|
||||||
|
'insurance' => $service->insurance ?? 0,
|
||||||
|
'extra' => $service->extra ?? 0,
|
||||||
|
'total' => ($service->flight_ticket ?? 0) + ($service->insurance ?? 0) + ($service->extra ?? 0),
|
||||||
|
]
|
||||||
|
];
|
||||||
|
};
|
||||||
|
|
||||||
|
$data['breakdowns'] = [
|
||||||
|
'alone' => $getBreakdown('Alone'),
|
||||||
|
'with_spouse' => $getBreakdown('With Spouse'),
|
||||||
|
'with_spouse_and_child' => $getBreakdown('With Spouse and Child'),
|
||||||
|
];
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -49,6 +49,7 @@
|
|||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
|
||||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet" />
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet" />
|
||||||
|
|
||||||
|
@stack('css')
|
||||||
|
|
||||||
<title>Raffles Educare</title>
|
<title>Raffles Educare</title>
|
||||||
</head>
|
</head>
|
||||||
@@ -97,6 +98,7 @@
|
|||||||
<script src="{{ asset('raffles/assets/js/theme.min.js') }}"></script>
|
<script src="{{ asset('raffles/assets/js/theme.min.js') }}"></script>
|
||||||
<script src="{{ asset('raffles/assets/js/liquid-ajax-contact-form.min.js') }}"></script>
|
<script src="{{ asset('raffles/assets/js/liquid-ajax-contact-form.min.js') }}"></script>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js')}}"></script>
|
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js')}}"></script>
|
||||||
|
@stack('js')
|
||||||
<div class="lqd-cc lqd-cc--inner fixed pointer-events-none"></div>
|
<div class="lqd-cc lqd-cc--inner fixed pointer-events-none"></div>
|
||||||
<div
|
<div
|
||||||
class="lqd-cc--el lqd-cc-solid lqd-cc-explore flex items-center justify-center rounded-full fixed pointer-events-none">
|
class="lqd-cc--el lqd-cc-solid lqd-cc-explore flex items-center justify-center rounded-full fixed pointer-events-none">
|
||||||
|
|||||||
@@ -1,4 +1,120 @@
|
|||||||
@extends('client.raffles.layouts.app')
|
@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('content')
|
||||||
<section class="about section-fall" id="ball-section">
|
<section class="about section-fall" id="ball-section">
|
||||||
<canvas id="flagCanvas"></canvas>
|
<canvas id="flagCanvas"></canvas>
|
||||||
@@ -17,311 +133,143 @@
|
|||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row" id="interactiveSection">
|
<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">
|
<div class="wizard-container">
|
||||||
@csrf
|
<div class="nav" id="step-nav">
|
||||||
<input type="hidden" name="country_id" id="country_id">
|
<button class="active" data-step="0">Country</button>
|
||||||
<input type="hidden" name="test_id" id="test_id">
|
<button data-step="1">Stay Type</button>
|
||||||
<input type="hidden" name="intake_id" id="intake_id">
|
<button data-step="2">Other Services</button>
|
||||||
<input type="hidden" name="programlevel_id" id="programlevel_id"> --}}
|
<button data-step="3">Program Level</button>
|
||||||
|
<button data-step="4">Program</button>
|
||||||
<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>
|
||||||
|
|
||||||
|
<form id="multiStepForm">
|
||||||
|
|
||||||
|
<!-- 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>
|
</div>
|
||||||
@endforeach
|
@endforeach
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="step-content" id="step2">
|
<div style="text-align:right;">
|
||||||
<h3 class="text-20 text-black font-bold pb-20">Choose items to find the total cost</h3>
|
<button type="button" class="btn btn-next">Next</button>
|
||||||
<h5 class="text-ter text-18 font-medium pb-20">Which level are you applying for?</h5>
|
|
||||||
|
|
||||||
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- 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
|
@endforeach
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div style="display:flex; justify-content:space-between;">
|
||||||
<div class="step-content" id="step3">
|
<button type="button" class="btn btn-prev">Previous</button>
|
||||||
<h3 class="text-20 text-black font-bold pb-20">Choose items to find the total cost</h3>
|
<button type="button" class="btn btn-next">Next</button>
|
||||||
<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>
|
|
||||||
</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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="step-content" id="step4">
|
<!-- Step 3: Proficiency -->
|
||||||
<h3 class="text-20 text-black font-bold pb-20">Choose items to find the total cost</h3>
|
<div class="tab-pane" data-step="2">
|
||||||
<h5 class="text-ter text-18 font-medium pb-20">Cost of Living</h5>
|
<h2 class="step-title">Do you want to include other services?</h2>
|
||||||
|
|
||||||
<div class="row flex py-20">
|
<div class="form-group">
|
||||||
<div class="col col-sm-4">
|
<input type="radio" name="services" id="yes" value="yes"> <label
|
||||||
<div class="flex items-center gap-10 px-10 py-20 bg-white rounded-30 tabs">
|
for="yes">Yes</label>
|
||||||
<div class="circle1"></div>
|
<input type="radio" name="services" id="no" value="no"> <label
|
||||||
<a href="#" class="select-year" data-id="1">
|
for="no">No</label>
|
||||||
<h3 class="text-20 text-ter p-0 m-0">UK £829 / £9948</h3>
|
</div>
|
||||||
</a>
|
|
||||||
|
|
||||||
</div>
|
<div style="display:flex; justify-content:space-between;">
|
||||||
</div>
|
<button type="button" class="btn btn-prev">Previous</button>
|
||||||
<div class="col col-sm-4">
|
<button type="button" class="btn btn-next">Next</button>
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="step-content" id="step5">
|
<!-- Step 4: Basic -->
|
||||||
<h3 class="text-20 text-black font-bold pb-20">Choose items to find the total cost</h3>
|
<div class="tab-pane" data-step="3">
|
||||||
<h5 class="text-ter text-18 font-medium pb-20">Accomodation cost per year:</h5>
|
<h2 class="step-title">Which Level are you applying for?</h2>
|
||||||
|
|
||||||
<div class="row flex py-20">
|
<div class="form-group">
|
||||||
<div class="col col-sm-4">
|
@foreach ($programLevelOptions as $level)
|
||||||
<div class="flex items-center gap-10 px-10 py-20 bg-white rounded-30 tabs">
|
<input type="radio" name="program_level" id="program_level_id"
|
||||||
<div class="circle1"></div>
|
value="program_level_id"> <label
|
||||||
<a href="#" class="select-programlevel_id" data-id="">
|
for="program_level_id">{{ $level }}</label>
|
||||||
<h3 class="text-20 text-ter p-0 m-0">UK £1,079 / £12,948</h3>
|
@endforeach
|
||||||
</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">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>
|
</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>
|
||||||
|
|
||||||
<div class="step-content" id="step6">
|
<!-- Step 5: Contact -->
|
||||||
<h3 class="text-20 text-black font-bold pb-20">Choose items to find the total cost</h3>
|
<div class="tab-pane" data-step="4">
|
||||||
<h5 class="text-ter text-18 font-medium pb-20">Non-Refundable onetime cost in
|
<h2 class="step-title">Which Program are you applying for?</h2>
|
||||||
processing:</h5>
|
|
||||||
|
|
||||||
<div class="row flex py-20">
|
<div class="form-group">
|
||||||
<div class="col col-sm-4">
|
<div class="d-flex flex-wrap">
|
||||||
<div class="flex items-center gap-10 px-10 py-20 bg-white rounded-30 tabs">
|
@foreach ($programss as $key => $program)
|
||||||
<div class="circle1"></div>
|
<select name="country_id" class="form-control" required>
|
||||||
<a href="#" class="select-programlevel_id" data-id="">
|
<option value="">Select Program</option>
|
||||||
<h3 class="text-20 text-ter p-0 m-0">UK 2 to 3 Lakhs</h3>
|
<option value="{{ $key }}">{{ $program }}</option>
|
||||||
</a>
|
</select>
|
||||||
</div>
|
@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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="step-content" id="step7">
|
<div style="display:flex; justify-content:space-between;">
|
||||||
<h3 class="text-20 text-black font-bold pb-20">Choose items to find the total cost</h3>
|
<button type="button" class="btn btn-prev">Previous</button>
|
||||||
<h5 class="text-ter text-18 font-medium pb-20">Do you want to include other services?
|
<button type="submit" class="btn btn-next">Finish</button>
|
||||||
</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-programlevel_id" data-id="">
|
|
||||||
<h3 class="text-20 text-ter p-0 m-0">Flighr Ticket</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">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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class=" flex items-center justify-center next-btn">
|
</form>
|
||||||
<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>
|
||||||
|
|
||||||
<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>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
{{-- </form> --}}
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col col-lg-1"></div>
|
<div class="col col-lg-1"></div>
|
||||||
|
|
||||||
<div class="col col-lg-4">
|
{{-- <div class="col col-lg-4">
|
||||||
<div class="total-cost">
|
<div class="total-cost">
|
||||||
<h4>Total <span class="text-black">Cost</span> </h4>
|
<h4>Total <span class="text-black">Cost</span> </h4>
|
||||||
<table>
|
<table>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th class="font-bold">S.N.</th>
|
<th class="font-bold">S.N.</th>
|
||||||
<th class="font-bold ">Select</th>
|
<th class="font-bold">Select</th>
|
||||||
<th class="font-bold ">Max Price</th>
|
<th class="font-bold">Max Price</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody id="totalCostBody">
|
||||||
<tr>
|
<!-- Filled dynamically -->
|
||||||
<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>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> --}}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -329,27 +277,75 @@
|
|||||||
|
|
||||||
</section>
|
</section>
|
||||||
@endsection
|
@endsection
|
||||||
|
@push('js')
|
||||||
{{-- @push('js')
|
|
||||||
<script>
|
<script>
|
||||||
$(document).ready(function() {
|
const form = document.getElementById('multiStepForm');
|
||||||
const map = {
|
const tabs = document.querySelectorAll('.tab-pane');
|
||||||
'select-country': 'country_id',
|
const nextBtns = document.querySelectorAll('.btn-next');
|
||||||
'select-test': 'test_id',
|
const prevBtns = document.querySelectorAll('.btn-prev');
|
||||||
'select-intake': 'intake_id',
|
const navButtons = document.querySelectorAll('#step-nav button');
|
||||||
'select-programlevel_id': 'programlevel_id'
|
|
||||||
};
|
|
||||||
|
|
||||||
$(document).on('click', 'a', function(e) {
|
let currentStep = 0;
|
||||||
const classes = $(this).attr('class')?.split(/\s+/) || [];
|
|
||||||
for (const cls of classes) {
|
function showStep(step) {
|
||||||
if (map[cls]) {
|
tabs.forEach((tab, idx) => {
|
||||||
e.preventDefault();
|
tab.classList.toggle('active', idx === step);
|
||||||
$('#' + map[cls]).val($(this).data('id'));
|
});
|
||||||
break;
|
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>
|
</script>
|
||||||
@endpush --}}
|
@endpush
|
||||||
|
|||||||
Reference in New Issue
Block a user