feat: Add CostCalculator module with CRUD functionality and frontend integration
- Created new module for CostCalculator with necessary routes and controllers. - Implemented views for creating, editing, and displaying costs. - Added form partials for cost input with validation. - Integrated living status options in the form. - Developed frontend logic for cost calculation steps with dynamic UI updates. - Included necessary assets (JS and SCSS) for styling and functionality. - Updated constants for living status options. - Enhanced existing client-side cost calculator page with new features.
This commit is contained in:
@@ -19,158 +19,263 @@
|
||||
|
||||
<div class="col col-lg-7">
|
||||
|
||||
<form id="costForm" action="{{ route('cost.calculator') }}" method="POST">
|
||||
{{-- <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">
|
||||
<input type="hidden" name="programlevel_id" id="programlevel_id"> --}}
|
||||
|
||||
<div class="cost-choosing">
|
||||
<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="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>
|
||||
|
||||
<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="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-year" data-id="1">
|
||||
<h3 class="text-20 text-ter p-0 m-0">1 year</h3>
|
||||
<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 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="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 href="#" class="select-programlevel_id"
|
||||
data-id="{{ $id }}">
|
||||
<h3 class="text-20 text-ter p-0 m-0">{{ $level }}</h3>
|
||||
</a>
|
||||
</div>
|
||||
</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">Whats Your Program Level Choice?</h5>
|
||||
<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">
|
||||
@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 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>
|
||||
|
||||
<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 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="monkey" id="monkey" style="left: 0%;"><img
|
||||
src="{{ asset('raffles/assets/images/icons/monkey.png') }}" alt="">
|
||||
<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>
|
||||
</form>
|
||||
|
||||
<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>
|
||||
|
||||
</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>
|
||||
</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>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<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 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>
|
||||
|
||||
<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 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>
|
||||
|
||||
</div>
|
||||
{{-- </form> --}}
|
||||
|
||||
</div>
|
||||
|
||||
@@ -225,7 +330,7 @@
|
||||
</section>
|
||||
@endsection
|
||||
|
||||
@push('js')
|
||||
{{-- @push('js')
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
const map = {
|
||||
@@ -247,4 +352,4 @@
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
@endpush --}}
|
||||
|
||||
Reference in New Issue
Block a user