refactor: Simplify cost calculator form structure and enhance layout
This commit is contained in:
@@ -131,128 +131,12 @@
|
||||
|
||||
<section class="lqd-section pb-160">
|
||||
<div class="container">
|
||||
|
||||
<div class="row" id="interactiveSection">
|
||||
|
||||
{{-- <div class="col col-lg-7">
|
||||
<div class="row" id="interactiveSection">
|
||||
|
||||
<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>
|
||||
|
||||
<form id="multiStepForm" method="GET" action="{{ route('cost.getCost') }}">
|
||||
|
||||
<!-- 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_id"
|
||||
value="{{ $country->id }}" id="{{ $country->id }}">
|
||||
<label class="form-check-label" for="{{ $country->id }}">
|
||||
{{ $country->title }}
|
||||
</label>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="text-align:right;">
|
||||
<button type="button" class="btn btn-next">Next</button>
|
||||
</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_id"
|
||||
value="{{ $key }}" id="status_type_{{ $key }}">
|
||||
<label class="form-check-label" for="status_type_{{ $key }}">
|
||||
{{ $status }}
|
||||
</label>
|
||||
</div>
|
||||
@endforeach
|
||||
</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>
|
||||
|
||||
<!-- Step 3: Proficiency -->
|
||||
<div class="tab-pane" data-step="2">
|
||||
<h2 class="step-title">Do you want to include other services?</h2>
|
||||
|
||||
<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 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>
|
||||
|
||||
<!-- Step 4: Basic -->
|
||||
<div class="tab-pane" data-step="3">
|
||||
<h2 class="step-title">Which Level are you applying for?</h2>
|
||||
|
||||
<div class="form-group">
|
||||
@foreach ($programLevelOptions as $level)
|
||||
<input type="radio" name="" id="" value=""> <label
|
||||
for="program_level_id">{{ $level }}</label>
|
||||
@endforeach
|
||||
</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>
|
||||
|
||||
<!-- Step 5: Contact -->
|
||||
<div class="tab-pane" data-step="4">
|
||||
<h2 class="step-title">Which Program are you applying for?</h2>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="d-flex flex-wrap">
|
||||
@foreach ($programss as $key => $program)
|
||||
<select name="program_id" class="form-control" required>
|
||||
<option value="">Select Program</option>
|
||||
<option value="{{ $key }}">{{ $program }}</option>
|
||||
</select>
|
||||
@endforeach
|
||||
</div>
|
||||
</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>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div> --}}
|
||||
|
||||
<div class="col col-lg-7">
|
||||
<form id="cost-calculator">
|
||||
<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">
|
||||
@@ -260,42 +144,17 @@
|
||||
<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">
|
||||
<div class="col col-sm-4">
|
||||
<div class="flex items-center gap-10 px-10 py-12 bg-white rounded-30 tabs">
|
||||
<input name="country" type="radio" id="country1">
|
||||
|
||||
<label class="text-20 text-ter p-0 m-0" for="country1">UK</label>
|
||||
|
||||
@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>
|
||||
</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="country" type="radio" id="country2">
|
||||
|
||||
<label class="text-20 text-ter p-0 m-0" for="country2">Australia</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="country" type="radio" id="country3">
|
||||
|
||||
<label class="text-20 text-ter p-0 m-0" for="country3">USA</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="country" type="radio" id="country4">
|
||||
|
||||
<label class="text-20 text-ter p-0 m-0" for="country4">Newzealand</label>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
<div class="step-content" id="step2">
|
||||
@@ -304,34 +163,16 @@
|
||||
</h5>
|
||||
|
||||
<div class="row flex flex-wrap py-20">
|
||||
<div class="col col-sm-6">
|
||||
<div class="flex items-center gap-10 px-10 py-12 bg-white rounded-30 tabs">
|
||||
<input name="alone" type="radio" id="alone">
|
||||
|
||||
<label class="text-20 text-ter p-0 m-0" for="alone">Alone</label>
|
||||
|
||||
|
||||
@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>
|
||||
</div>
|
||||
<div class="col col-sm-6">
|
||||
<div class="flex items-center gap-10 px-10 py-12 bg-white rounded-30 tabs">
|
||||
<input name="alone" type="radio" id="spouse">
|
||||
|
||||
<label class="text-20 text-ter p-0 m-0" for="spouse">With Spouse</label>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col col-sm-6">
|
||||
<div class="flex items-center gap-10 px-10 py-12 bg-white rounded-30 tabs">
|
||||
<input name="alone" type="radio" id="child">
|
||||
|
||||
<label class="text-20 text-ter p-0 m-0" for="child">With Spouse and
|
||||
child</label>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
<div class="step-content" id="step3">
|
||||
@@ -366,25 +207,16 @@
|
||||
<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">
|
||||
<div class="col col-sm-4">
|
||||
<div class="flex items-center gap-10 px-10 py-12 bg-white rounded-30 tabs">
|
||||
<input name="level" type="radio" id="bachelors">
|
||||
|
||||
<label class="text-20 text-ter p-0 m-0" for="bachelors">Bachelors</label>
|
||||
|
||||
|
||||
@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>
|
||||
</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="level" type="radio" id="masters">
|
||||
|
||||
<label class="text-20 text-ter p-0 m-0" for="masters">Masters</label>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
<div class="step-content" id="step5">
|
||||
@@ -394,11 +226,12 @@
|
||||
<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">
|
||||
<select name="" id="">
|
||||
<option value="">Select Program</option>
|
||||
<option value="">Masters in Information Technology</option>
|
||||
</select>
|
||||
|
||||
@foreach ($programss as $key => $program)
|
||||
<select name="program_id" id="">
|
||||
<option value="">Select Program</option>
|
||||
<option value="{{ $key }}">{{ $program }}</option>
|
||||
</select>
|
||||
@endforeach
|
||||
|
||||
|
||||
</div>
|
||||
@@ -452,34 +285,34 @@
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</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 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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user