Add cost calculator page and update header link

- Created a new cost calculator page with form functionality to select study options.
- Updated the header to link to the new cost calculator route instead of a static PHP file.
This commit is contained in:
2025-08-12 17:59:36 +05:45
parent 59e5392370
commit 03c5955768
18 changed files with 778 additions and 514 deletions

View File

@@ -9,7 +9,8 @@ use Modules\CourseFinder\Http\Controllers\ProgramLevelController;
Route::get('/', [WebsiteController::class, 'home']);
Route::get('course-finder/{id}', [WebsiteController::class, 'coursefinderSingle'])->name('coursefinder.single');
Route::get('/course-finder', [WebsiteController::class, 'coursefinder'])->name('program.coursefinder');
Route::get('/course-finder/', [WebsiteController::class, 'coursefinder'])->name('program.coursefinder');
Route::get('/cost-calculator', [WebsiteController::class, 'costCalculator'])->name('cost.calculator');
Route::get('/resources', [WebsiteController::class, 'resources'])->name('resources');
Route::get('blog/{alias}', [WebsiteController::class, 'blogSingle'])->name('blog.single');
Route::get('service/{alias}', [WebsiteController::class, 'serviceSingle'])->name('service.single');

View File

@@ -239,4 +239,17 @@ class WebsiteController extends Controller
return view("client.raffles.pages.resources-template", $data);
}
public function costCalculator(Request $request)
{
$data['programs'] = $this->programService->findAll($request);
$data['countryOptions'] = Country::where('status', 1)->where('parent_id', null)->pluck('title', 'id');
$data['programLevelOptions'] = ProgramLevel::where('status', 1)->pluck('title', 'id');
$data['intakeOptions'] = Program::INTAKE;
$data['coopOptions'] = Coop::where('status', 1)->pluck('title', 'id');
$data['testOptions'] = Test::where('status', 1)->where('parent_id', null)->pluck('title', 'id');
$data['statusOptions'] = config('constants.page_status_options');
return view("client.raffles.pages.cost-calculator", $data);
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 435 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 360 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 459 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 376 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 385 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 343 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 543 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 80 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 322 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 312 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 548 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 103 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 499 KiB

File diff suppressed because it is too large Load Diff

View File

@@ -166,7 +166,7 @@
class="lqd-scrl-indc-el inline-block absolute rounded-4"></span></span></span></a>
</div>
<div class="pl-20 -rotate-90">
<a href="cost-calculator.php"
<a href="{{ route('cost.calculator') }}"
class="btn btn-solid btn-icon-right rounded-full pointer-events-auto text-white bg-primary module-btn-circle"
data-lqd-interactive-color="true"><span class="btn-icon rotate-90"><i
class="fas fa-calculator text-20"></i></span></a>

View File

@@ -0,0 +1,250 @@
@extends('client.raffles.layouts.app')
@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" id="interactiveSection">
<div class="col col-lg-7">
<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">Where do you want to study?</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>
<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 English Proficiency Do you Have?
</h5>
<div class="row flex py-20">
@foreach ($testOptions as $id => $test)
<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-test" data-id="{{ $id }}">
<h3 class="text-20 text-ter p-0 m-0">{{ $test }}</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">Which Intake do you want to go?</h5>
<div class="row flex py-20">
@foreach ($intakeOptions as $id => $intake)
<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="{{ $id }}">
<h3 class="text-20 text-ter p-0 m-0">{{ $intake }}</h3>
</a>
</div>
</div>
@endforeach
</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">How long do you want to study</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">1 year</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="circle2"></div>
<a href="#" class="select-year" data-id="2">
<h3 class="text-20 text-ter p-0 m-0">2 year</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">3 year</h3>
</a>
</div>
</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">Whats Your Program Level Choice?</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>
@endforeach
</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"><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>
<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>
</table>
</div>
</div>
</div>
</div>
</section>
</section>
@endsection
@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'
};
$(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;
}
}
});
});
</script>
@endpush