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.

Modules/CostCalculator/app/Http/Controllers/CostCalculatorController.php

@@ -0,0 +1,246 @@
+<?php
+
+namespace Modules\CostCalculator\Http\Controllers;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\DB;
+use Maatwebsite\Excel\Facades\Excel;
+use Modules\CCMS\Models\Country;
+use Modules\CCMS\Models\Institution;
+use Modules\CCMS\Models\Test;
+use Modules\CourseFinder\Models\ProgramLevel;
+use Modules\CostCalculator\Models\CostCalculator;
+use Modules\CostCalculator\Services\CostCalculatorService;
+use Modules\CourseFinder\Models\Program;
+
+class ProgramController extends Controller
+{
+    protected $costCalculatorService;
+
+    public function __construct(CostCalculatorService $costCalculatorService)
+    {
+        $this->costCalculatorService = $costCalculatorService;
+    }
+    /**
+     * Display a listing of the resource.
+     */
+    public function index(Request $request)
+    {
+        $data['title'] = 'Cost Calculator List';
+        $data['costs'] = $this->costCalculatorService->findAll($request);
+        $data['countryOptions'] = Country::where('status', 1)->pluck('title', 'id');
+        $data['programLevelOptions'] = ProgramLevel::where('status', 1)->pluck('title', 'id');
+        $data['programOptions'] = Program::where('status', 1)->pluck('title', 'id');
+        $data['livingStatusOptions'] = config('constants.living_status');
+
+        return view('costCalculator::cost.index', $data);
+    }
+
+    /**
+     * Show the form for creating a new resource.
+     */
+    public function create()
+    {
+        $data['title'] = 'Program Create';
+        $data['editable'] = false;
+        $data['intakeOptions'] = Program::INTAKE;
+        $data['institutionOptions'] = Institution::where('status', 1)->pluck('title', 'id');
+        $data['programLevelOptions'] = ProgramLevel::where('status', 1)->pluck('title', 'id');
+        $data['testOptions'] = Test::where('status', 1)->where('parent_id', null)->pluck('title', 'id');
+
+        return view('coursefinder::program.create', $data);
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     */
+    public function store(Request $request)
+    {
+
+        $request->validate([
+            'title' => 'required',
+        ]);
+
+        $input = $request->except(['prof_test_accepted']);
+
+        DB::transaction(function () use ($input, $request) {
+
+            $program = Program::create($input);
+
+            $attachData = [];
+
+            foreach ($request->prof_test_accepted as $item) {
+                $attachData[$item['test_id']] = [
+                    'min_score' => $item['min_score'],
+                    'band_score' => $item['band_score'],
+                ];
+            }
+
+            $program->tests()->sync($attachData);
+
+            flash()->success('Program has been created!');
+        });
+
+        return redirect()->route('program.index');
+    }
+
+    /**
+     * Show the specified resource.
+     */
+    public function show($id)
+    {
+        $data['title'] = 'View Program';
+        $data['program'] = Program::findOrFail($id);
+        $data['intakeOptions'] = Program::INTAKE;
+        return view('coursefinder::program.show', $data);
+    }
+
+    /**
+     * Show the form for editing the specified resource.
+     */
+    public function edit($id)
+    {
+        $data['title'] = 'Edit Program';
+        $data['editable'] = true;
+        $data['program'] = Program::findOrFail($id);
+        $data['intakeOptions'] = Program::INTAKE;
+        $data['institutionOptions'] = Institution::where('status', 1)->pluck('title', 'id');
+        $data['programLevelOptions'] = ProgramLevel::where('status', 1)->pluck('title', 'id');
+        $data['testOptions'] = Test::where('status', 1)->where('parent_id', null)->pluck('title', 'id');
+        $data['coopOptions'] = Coop::where('status', 1)->pluck('title', 'id');
+        $data['requiredDocumentOptions'] = RequiredDocument::where('status', 1)->pluck('title', 'id');
+        return view('coursefinder::program.edit', $data);
+    }
+
+    /**
+     * Update the specified resource in storage.
+     */
+    public function update(Request $request, $id)
+    {
+        $input = $request->except(['prof_test_accepted']);
+
+        DB::transaction(function () use ($input, $request, $id) {
+            $program = Program::findOrFail($id);
+            $program->update($input);
+
+            $attachData = [];
+
+            foreach ($request->prof_test_accepted as $item) {
+                $attachData[$item['test_id']] = [
+                    'min_score' => $item['min_score'],
+                    'band_score' => $item['band_score'],
+                ];
+            }
+
+            $program->tests()->sync($attachData);
+        });
+
+        flash()->success('program has been updated!');
+
+        return redirect()->route('program.index')->withSuccess('Program has been updated!');
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     */
+    public function destroy($id)
+    {
+        try {
+            $program = Program::findOrFail($id);
+            $program->delete();
+
+            flash()->success('Program has been deleted!');
+        } catch (\Throwable $th) {
+            flash()->error($th->getMessage());
+        }
+        return response()->json(['status' => 200, 'message' => 'Program has been deleted!'], 200);
+    }
+
+    public function getProgramByInstitution(Request $request)
+    {
+        try {
+            $program = Program::where(['institution_id' => $request->institution_id])
+                ->select('id', 'title')
+                ->get();
+            return response()->json([
+                'status' => true,
+                'data' => $program,
+                'msg' => 'Fetch',
+            ], 200);
+        } catch (\Throwable $th) {
+            return response()->json([
+                'status' => false,
+                'msg' => $th->getMessage(),
+            ], 500);
+        }
+    }
+
+    public function import(Request $request)
+    {
+        DB::beginTransaction();
+        try {
+            Excel::import(new ProgramImport(), $request->file('file')->store('temp'));
+            DB::commit();
+            return redirect()->back()->with('success', "Upload Succesfully");
+        } catch (\Throwable $th) {
+            DB::rollback();
+            return redirect()->back()->with('error', $th->getMessage());
+        }
+    }
+
+    public function getCoursesList(Request $request)
+    {
+        $data['intakes'] = Program::INTAKE;
+
+        $query = Program::query();
+
+        if ($request->filled('countries_id')) {
+            $query->whereRelation('institution', 'countries_id', $request->countries_id);
+        }
+
+        if ($request->filled('institution_id')) {
+            $query->where('institutions_id', $request->institution_id);
+        }
+
+        if ($request->filled('search')) {
+            $query->where('title', 'like', "%{$request->search}%");
+        }
+
+        if ($request->filled('programlevels_id')) {
+            $query->where('programlevels_id', $request->programlevels_id);
+        }
+
+        if ($request->filled('intake_id')) {
+            $query->whereJsonContains('intakes', $request->intake_id);
+        }
+
+        if ($request->filled('preffered_location')) {
+            $query->where('location', 'like', "%{$request->preffered_location}%");
+        }
+
+        if ($request->filled('service_id')) {
+            $query->whereRelation('services', 'service_id', '=', $request->service_id);
+
+            if ($request->filled('min_score')) {
+                $query->whereRelation('services', 'min_score', '<=', $request->min_score);
+            }
+
+            if ($request->filled('max_score')) {
+                $query->whereRelation('services', 'band_score', '<=', $request->max_score);
+            }
+        }
+
+        $data['courses'] = $query
+            ->orderBy('title', 'asc')
+            ->paginate(10)
+            ->withQueryString();
+
+        $queryCount = $data['courses']->total();
+
+        if ($request->ajax()) {
+            $view = view('client.raffles.pages.course.list', $data)->render();
+            return response()->json(['html' => $view, 'queryCount' => $queryCount]);
+        }
+    }
+}

Modules/CostCalculator/app/Models/CostCalculator.php

@@ -0,0 +1,44 @@
+<?php
+
+namespace Modules\CostCalculator\Models;
+
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Modules\CCMS\Models\Country;
+use Modules\CourseFinder\Models\Program;
+use Modules\CourseFinder\Models\ProgramLevel;
+
+// use Modules\CostCalculator\Database\Factories\CostCalculatorFactory;
+
+class CostCalculator extends Model
+{
+    use HasFactory;
+    use \Staudenmeir\EloquentJsonRelations\HasJsonRelationships;
+
+    /**
+     * The attributes that are mass assignable.
+     */
+    protected $guarded = [];
+
+    protected $casts = [
+        'living_cost' => 'object',
+        'accomodation_cost' => 'object',
+        'onetime_cost' => 'object',
+        'other_services' => 'object',
+    ];
+
+    public function institution()
+    {
+        return $this->belongsTo(Country::class, 'country_id');
+    }
+
+    public function programLevel()
+    {
+        return $this->belongsTo(ProgramLevel::class, 'programlevel_id');
+    }
+
+    public function program()
+    {
+        return $this->belongsTo(Program::class, 'program_id');
+    }
+}

Modules/CostCalculator/app/Providers/CostCalculatorServiceProvider.php

@@ -0,0 +1,135 @@
+<?php
+
+namespace Modules\CostCalculator\Providers;
+
+use Illuminate\Support\Facades\Blade;
+use Illuminate\Support\ServiceProvider;
+use Nwidart\Modules\Traits\PathNamespace;
+use RecursiveDirectoryIterator;
+use RecursiveIteratorIterator;
+
+class CostCalculatorServiceProvider extends ServiceProvider
+{
+    use PathNamespace;
+
+    protected string $name = 'CostCalculator';
+
+    protected string $nameLower = 'costcalculator';
+
+    /**
+     * Boot the application events.
+     */
+    public function boot(): void
+    {
+        $this->registerCommands();
+        $this->registerCommandSchedules();
+        $this->registerTranslations();
+        $this->registerConfig();
+        $this->registerViews();
+        $this->loadMigrationsFrom(module_path($this->name, 'database/migrations'));
+    }
+
+    /**
+     * Register the service provider.
+     */
+    public function register(): void
+    {
+        $this->app->register(EventServiceProvider::class);
+        $this->app->register(RouteServiceProvider::class);
+    }
+
+    /**
+     * Register commands in the format of Command::class
+     */
+    protected function registerCommands(): void
+    {
+        // $this->commands([]);
+    }
+
+    /**
+     * Register command Schedules.
+     */
+    protected function registerCommandSchedules(): void
+    {
+        // $this->app->booted(function () {
+        //     $schedule = $this->app->make(Schedule::class);
+        //     $schedule->command('inspire')->hourly();
+        // });
+    }
+
+    /**
+     * Register translations.
+     */
+    public function registerTranslations(): void
+    {
+        $langPath = resource_path('lang/modules/'.$this->nameLower);
+
+        if (is_dir($langPath)) {
+            $this->loadTranslationsFrom($langPath, $this->nameLower);
+            $this->loadJsonTranslationsFrom($langPath);
+        } else {
+            $this->loadTranslationsFrom(module_path($this->name, 'lang'), $this->nameLower);
+            $this->loadJsonTranslationsFrom(module_path($this->name, 'lang'));
+        }
+    }
+
+    /**
+     * Register config.
+     */
+    protected function registerConfig(): void
+    {
+        $relativeConfigPath = config('modules.paths.generator.config.path');
+        $configPath = module_path($this->name, $relativeConfigPath);
+
+        if (is_dir($configPath)) {
+            $iterator = new RecursiveIteratorIterator(new RecursiveDirectoryIterator($configPath));
+
+            foreach ($iterator as $file) {
+                if ($file->isFile() && $file->getExtension() === 'php') {
+                    $relativePath = str_replace($configPath . DIRECTORY_SEPARATOR, '', $file->getPathname());
+                    $configKey = $this->nameLower . '.' . str_replace([DIRECTORY_SEPARATOR, '.php'], ['.', ''], $relativePath);
+                    $key = ($relativePath === 'config.php') ? $this->nameLower : $configKey;
+
+                    $this->publishes([$file->getPathname() => config_path($relativePath)], 'config');
+                    $this->mergeConfigFrom($file->getPathname(), $key);
+                }
+            }
+        }
+    }
+
+    /**
+     * Register views.
+     */
+    public function registerViews(): void
+    {
+        $viewPath = resource_path('views/modules/'.$this->nameLower);
+        $sourcePath = module_path($this->name, 'resources/views');
+
+        $this->publishes([$sourcePath => $viewPath], ['views', $this->nameLower.'-module-views']);
+
+        $this->loadViewsFrom(array_merge($this->getPublishableViewPaths(), [$sourcePath]), $this->nameLower);
+
+        $componentNamespace = $this->module_namespace($this->name, $this->app_path(config('modules.paths.generator.component-class.path')));
+        Blade::componentNamespace($componentNamespace, $this->nameLower);
+    }
+
+    /**
+     * Get the services provided by the provider.
+     */
+    public function provides(): array
+    {
+        return [];
+    }
+
+    private function getPublishableViewPaths(): array
+    {
+        $paths = [];
+        foreach (config('view.paths') as $path) {
+            if (is_dir($path.'/modules/'.$this->nameLower)) {
+                $paths[] = $path.'/modules/'.$this->nameLower;
+            }
+        }
+
+        return $paths;
+    }
+}

Modules/CostCalculator/app/Providers/EventServiceProvider.php

@@ -0,0 +1,30 @@
+<?php
+
+namespace Modules\CostCalculator\Providers;
+
+use Illuminate\Foundation\Support\Providers\EventServiceProvider as ServiceProvider;
+
+class EventServiceProvider extends ServiceProvider
+{
+    /**
+     * The event handler mappings for the application.
+     *
+     * @var array<string, array<int, string>>
+     */
+    protected $listen = [];
+
+    /**
+     * Indicates if events should be discovered.
+     *
+     * @var bool
+     */
+    protected static $shouldDiscoverEvents = true;
+
+    /**
+     * Configure the proper event listeners for email verification.
+     */
+    protected function configureEmailVerification(): void
+    {
+        //
+    }
+}

Modules/CostCalculator/app/Providers/RouteServiceProvider.php

@@ -0,0 +1,50 @@
+<?php
+
+namespace Modules\CostCalculator\Providers;
+
+use Illuminate\Support\Facades\Route;
+use Illuminate\Foundation\Support\Providers\RouteServiceProvider as ServiceProvider;
+
+class RouteServiceProvider extends ServiceProvider
+{
+    protected string $name = 'CostCalculator';
+
+    /**
+     * Called before routes are registered.
+     *
+     * Register any model bindings or pattern based filters.
+     */
+    public function boot(): void
+    {
+        parent::boot();
+    }
+
+    /**
+     * Define the routes for the application.
+     */
+    public function map(): void
+    {
+        $this->mapApiRoutes();
+        $this->mapWebRoutes();
+    }
+
+    /**
+     * Define the "web" routes for the application.
+     *
+     * These routes all receive session state, CSRF protection, etc.
+     */
+    protected function mapWebRoutes(): void
+    {
+        Route::middleware('web')->group(module_path($this->name, '/routes/web.php'));
+    }
+
+    /**
+     * Define the "api" routes for the application.
+     *
+     * These routes are typically stateless.
+     */
+    protected function mapApiRoutes(): void
+    {
+        Route::middleware('api')->prefix('api')->name('api.')->group(module_path($this->name, '/routes/api.php'));
+    }
+}

Modules/CostCalculator/app/Services/CostCalculatorService.php

@@ -0,0 +1,53 @@
+<?php
+
+namespace Modules\CostCalculator\Services;
+
+use Modules\CostCalculator\Models\CostCalculator;
+
+class CostCalculatorService
+{
+    public function findAll($request)
+    {
+        return CostCalculator::when($request, function ($query) use ($request) {
+            if ($request->filled('country_id')) {
+                $query->whereRelation('institution', 'country_id', $request->country_id);
+            }
+
+            if ($request->filled('institution_id')) {
+                $query->where("institution_id", $request->institution_id);
+            }
+
+            if ($request->filled('programlevel_id')) {
+                $query->where("programlevel_id", $request->programlevel_id);
+            }
+
+            if ($request->filled('intake_id')) {
+                $intakeId = $request->intake_id;
+                $query->whereJsonContains('intakes', $intakeId);
+            }
+
+            if ($request->filled('status')) {
+                $query->where('status', $request->status);
+            }
+
+            if ($request->filled('search')) {
+                $search = $request->search;
+                $query->where('title', 'like', "%{$search}%");
+            }
+
+            if ($request->filled('location')) {
+                $location = $request->location;
+                $query->where('location', 'like', "%{$location}%");
+            }
+        })->latest()->paginate(10)->withQueryString();
+    }
+
+    public function pluck(callable $query = null)
+    {
+        $baseQuery = CostCalculator::query();
+        if (is_callable($query)) {
+            $query($baseQuery);
+        }
+        return $baseQuery->pluck('title', 'id');
+    }
+}

Modules/CostCalculator/composer.json

@@ -0,0 +1,30 @@
+{
+    "name": "nwidart/costcalculator",
+    "description": "",
+    "authors": [
+        {
+            "name": "Nicolas Widart",
+            "email": "n.widart@gmail.com"
+        }
+    ],
+    "extra": {
+        "laravel": {
+            "providers": [],
+            "aliases": {
+
+            }
+        }
+    },
+    "autoload": {
+        "psr-4": {
+            "Modules\\CostCalculator\\": "app/",
+            "Modules\\CostCalculator\\Database\\Factories\\": "database/factories/",
+            "Modules\\CostCalculator\\Database\\Seeders\\": "database/seeders/"
+        }
+    },
+    "autoload-dev": {
+        "psr-4": {
+            "Modules\\CostCalculator\\Tests\\": "tests/"
+        }
+    }
+}

Modules/CostCalculator/config/config.php

@@ -0,0 +1,5 @@
+<?php
+
+return [
+    'name' => 'CostCalculator',
+];

Modules/CostCalculator/database/migrations/2025_08_13_102211_create_cost_calculators_table.php

@@ -0,0 +1,38 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('cost_calculators', function (Blueprint $table) {
+            $table->id();
+            $table->unsignedInteger('country_id')->nullable();
+            $table->unsignedInteger('programlevel_id')->nullable();
+            $table->unsignedInteger('program_id')->nullable();
+            $table->unsignedInteger('living_status_id')->nullable();
+            $table->json('living_cost')->nullable();
+            $table->json('accomodation_cost')->nullable();
+            $table->json('onetime_cost')->nullable();
+            $table->json('other_services')->nullable();
+            $table->unsignedInteger('createdby')->nullable();
+            $table->unsignedInteger('updatedby')->nullable();
+            $table->boolean('status')->default(1);
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('cost_calculators');
+    }
+};

Modules/CostCalculator/database/seeders/CostCalculatorDatabaseSeeder.php

@@ -0,0 +1,16 @@
+<?php
+
+namespace Modules\CostCalculator\Database\Seeders;
+
+use Illuminate\Database\Seeder;
+
+class CostCalculatorDatabaseSeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     */
+    public function run(): void
+    {
+        // $this->call([]);
+    }
+}

Modules/CostCalculator/module.json

@@ -0,0 +1,11 @@
+{
+    "name": "CostCalculator",
+    "alias": "costcalculator",
+    "description": "",
+    "keywords": [],
+    "priority": 0,
+    "providers": [
+        "Modules\\CostCalculator\\Providers\\CostCalculatorServiceProvider"
+    ],
+    "files": []
+}

Modules/CostCalculator/package.json

@@ -0,0 +1,15 @@
+{
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "devDependencies": {
+    "axios": "^1.1.2",
+    "laravel-vite-plugin": "^0.7.5",
+    "sass": "^1.69.5",
+    "postcss": "^8.3.7",
+    "vite": "^4.0.0"
+  }
+}

Modules/CostCalculator/resources/views/cost/create.blade.php

@@ -0,0 +1,10 @@
+@extends('layouts.app')
+@section('content')
+    <div class="container-fluid">
+        <x-dashboard.breadcumb :title="$title" />
+
+        {{ html()->form('POST')->route('costCalculator.store')->class(['needs-validation'])->attributes(['novalidate', 'enctype' => 'multipart/form-data', 'onkeydown' => "return event.key != 'Enter';"])->open() }}
+        @include('costCalculator::cost.partials.form')
+        {{ html()->form()->close() }}
+    </div>
+@endsection

Modules/CostCalculator/resources/views/cost/partials/form.blade.php

@@ -0,0 +1,326 @@
+<div class="row">
+    <div class="col-lg-12">
+        <div class="card">
+            <div class="card-header">
+                <div class="d-flex align-items-center">
+                    <div class="flex-grow-1">
+                        <h6 class="card-title mb-0">Cost Calculator</h6>
+                    </div>
+                    <div class="flex-shrink-0">
+                        <ul class="list-inline card-toolbar-menu d-flex align-items-center mb-0">
+                            <li class="list-inline-item">
+                                <a class="minimize-card align-middle" data-bs-toggle="collapse"
+                                    href="#collapse-personal" role="button" aria-expanded="true"
+                                    aria-controls="collapseExample2">
+                                    <i class="mdi mdi-plus plus align-middle"></i>
+                                    <i class="mdi mdi-minus minus align-middle"></i>
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            <div class="card-body show collapse" id="collapse-personal">
+                <div class="row gy-3">
+                    <div class="col-md-4">
+                        {{ html()->label('Country')->class('form-label') }}
+                        {{ html()->span('*')->class('text-danger') }}
+                        {{ html()->select('country_id', $countryOptions)->placeholder('Select')->class('form-select choices-select')->required() }}
+                        {{ html()->div('Please select country')->class('invalid-feedback') }}
+                    </div>
+
+                    <div class="col-md-4">
+                        {{ html()->label('Program Level')->class('form-label')->for('programlevel_id') }}
+                        {{ html()->span('*')->class('text-danger') }}
+                        {{ html()->select('programlevel_id', $programLevelOptions)->placeholder('Select')->class('form-select choices-select')->required() }}
+                        {{ html()->div('Please select program level')->class('invalid-feedback') }}
+                    </div>
+
+                    <div class="col-md-4">
+                        {{ html()->label('Living Status')->class('form-label')->for('institution_id') }}
+                        {{ html()->span('*')->class('text-danger') }}
+                        {{ html()->select('living_status_id', $livingStatusOptions)->placeholder('Select')->class('form-select choices-select')->required() }}
+                        {{ html()->div('Please select Living Status')->class('invalid-feedback') }}
+                    </div>
+
+                    <div class="col-md-12">
+                        {{ html()->label('Program')->class('form-label')->for('program_id') }}
+                        {{ html()->span('*')->class('text-danger') }}
+                        {{ html()->select('program_id', $programOptions)->placeholder('Select')->class('form-select choices-select')->required() }}
+                        {{ html()->div('Please select program')->class('invalid-feedback') }}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="row">
+    <div class="col-lg-12">
+
+        <div class="card">
+            <div class="card-header">
+                <div class="d-flex align-items-center">
+                    <div class="flex-grow-1">
+                        <h6 class="card-title mb-0">Living Cost</h6>
+                    </div>
+                    <div class="flex-shrink-0">
+                        <ul class="list-inline card-toolbar-menu d-flex align-items-center mb-0">
+                            <li class="list-inline-item">
+                                <a class="minimize-card collapsed align-middle" data-bs-toggle="collapse"
+                                    href="#collapse-preparation" role="button" aria-expanded="false"
+                                    aria-controls="collapseExample2">
+                                    <i class="mdi mdi-plus plus align-middle"></i>
+                                    <i class="mdi mdi-minus minus align-middle"></i>
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            <div class="card-body show collapse" id="collapse-preparation">
+                <div class="table-responsive">
+                    <table class="table-borderless table-nowrap table-sm table" id="livingCostTable">
+                        <thead class="table-primary text-center">
+                            <tr>
+                                <th scope="col" width=30%>Monthly</th>
+                                <th scope="col" width=30%>Yearly</th>
+                                <th scope="col"></th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            @if ($editable)
+                                @if ($program->level)
+
+                                    @forelse ($program->level as $key => $item)
+                                        @include('coursefinder::program.partials.qualification-form', [
+                                            'numInc' => $key,
+                                            'value' => $item,
+                                        ])
+                                    @empty
+                                    @endforelse
+                                @else
+                                    @include('coursefinder::program.partials.qualification-form', [
+                                        'numInc' => 0,
+                                    ])
+
+                                @endif
+                            @else
+                                @include('coursefinder::program.partials.qualification-form', [
+                                    'numInc' => 0,
+                                ])
+                            @endif
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+
+        <div class="card">
+            <div class="card-header">
+                <div class="d-flex align-items-center">
+                    <div class="flex-grow-1">
+                        <h6 class="card-title mb-0">Accomodation Cost</h6>
+                    </div>
+                    <div class="flex-shrink-0">
+                        <ul class="list-inline card-toolbar-menu d-flex align-items-center mb-0">
+                            <li class="list-inline-item">
+                                <a class="minimize-card collapsed align-middle" data-bs-toggle="collapse"
+                                    href="#collapse-proficiency" role="button" aria-expanded="false"
+                                    aria-controls="collapseExample2">
+                                    <i class="mdi mdi-minus minus align-middle"></i>
+                                    <i class="mdi mdi-plus plus align-middle"></i>
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            <div class="card-body show collapse" id="collapse-proficiency">
+                <div class="table-responsive">
+                    <table class="table-borderless table-nowrap table-sm table" id="proficiency-table">
+                        <thead class="table-primary text-center">
+                            <tr>
+                                <th scope="col" width=30%>Monthly</th>
+                                <th scope="col" width=30%>Yearly</th>
+                                <th scope="col"></th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            @if ($editable)
+                                @forelse ($program->tests as $key => $item)
+                                    @include('coursefinder::program.partials.proficiency-form', [
+                                        'numInc' => $key,
+                                        'value' => $item,
+                                    ])
+                                @empty
+                                    @include('coursefinder::program.partials.proficiency-form', [
+                                        'numInc' => 0,
+                                    ])
+                                @endforelse
+                            @else
+                                @include('coursefinder::program.partials.proficiency-form', [
+                                    'numInc' => 0,
+                                ])
+                            @endif
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+            <!-- end card body -->
+        </div>
+        <!-- end card -->
+
+        <div class="card">
+            <div class="card-header">
+                <div class="d-flex align-items-center">
+                    <div class="flex-grow-1">
+                        <h6 class="card-title mb-0">One Time Cost (Non-Refundable)</h6>
+                    </div>
+                    <div class="flex-shrink-0">
+                        <ul class="list-inline card-toolbar-menu d-flex align-items-center mb-0">
+                            <li class="list-inline-item">
+                                <a class="minimize-card collapsed align-middle" data-bs-toggle="collapse"
+                                    href="#collapse-fee-breakdown" role="button" aria-expanded="false"
+                                    aria-controls="collapseExample2">
+                                    <i class="mdi mdi-plus plus align-middle"></i>
+                                    <i class="mdi mdi-minus minus align-middle"></i>
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            <div class="card-body show collapse" id="collapse-fee-breakdown">
+                <div class="table-responsive">
+                    <table class="table-borderless table-nowrap table-sm table" id="feeBreakdown-table">
+                        <thead class="table-primary text-center">
+                            <tr>
+                                <th scope="col">Visa</th>
+                                <th scope="col">Biometrics</th>
+                                <th scope="col">Sevis</th>
+                                <th scope="col">Application</th>
+                                <th scope="col"></th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            @if ($editable)
+                                @if ($program->fee_breakdown)
+                                    @forelse ($program->fee_breakdown as $key => $item)
+                                        @include('coursefinder::program.partials.feeBreakdown', [
+                                            'numInc' => $key,
+                                            'value' => $item,
+                                        ])
+                                    @empty
+                                    @endforelse
+                                @else
+                                    @include('coursefinder::program.partials.feeBreakdown', [
+                                        'numInc' => 0,
+                                    ])
+
+                                @endif
+                            @else
+                                @include('coursefinder::program.partials.feeBreakdown', [
+                                    'numInc' => 0,
+                                ])
+                            @endif
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+
+        <div class="card">
+            <div class="card-header">
+                <div class="d-flex align-items-center">
+                    <div class="flex-grow-1">
+                        <h6 class="card-title mb-0">Other Services</h6>
+                    </div>
+                    <div class="flex-shrink-0">
+                        <ul class="list-inline card-toolbar-menu d-flex align-items-center mb-0">
+                            <li class="list-inline-item">
+                                <a class="minimize-card collapsed align-middle" data-bs-toggle="collapse"
+                                    href="#collapse-course-module" role="button" aria-expanded="false"
+                                    aria-controls="collapseExample2">
+                                    <i class="mdi mdi-plus plus align-middle"></i>
+                                    <i class="mdi mdi-minus minus align-middle"></i>
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            <div class="card-body show collapse" id="collapse-course-module">
+                <div class="table-responsive">
+                    <table class="table-borderless table-nowrap table-sm table" id="courseModule-table">
+                        <thead class="table-primary text-center">
+                            <tr>
+                                <th scope="col">Flight Ticket</th>
+                                <th scope="col">Health Insurance</th>
+                                <th scope="col">Extra</th>
+                                <th scope="col"></th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            @if ($editable)
+                                @if ($program->course_module)
+                                    @forelse ($program->course_module as $key => $item)
+                                        @include('coursefinder::program.partials.courseModule', [
+                                            'numInc' => $key,
+                                            'value' => $item,
+                                        ])
+                                    @empty
+                                    @endforelse
+                                @else
+                                    @include('coursefinder::program.partials.courseModule', [
+                                        'numInc' => 0,
+                                    ])
+
+                                @endif
+                            @else
+                                @include('coursefinder::program.partials.courseModule', [
+                                    'numInc' => 0,
+                                ])
+                            @endif
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+
+        <div class="mb-3 text-end">
+            <a href="{{ route('program.index') }}" class="btn btn-danger w-sm">Cancel</a>
+            <button type="submit" class="btn btn-success w-sm">Save</button>
+
+        </div>
+    </div>
+
+</div>
+
+@push('js')
+    <script>
+        let numInc = 0;
+
+        const cloneRow = (element) => {
+            let newRow = $(element).closest('tr').clone();
+            numInc++;
+            newRow.find('input, select').each(function() {
+                let name = $(this).attr('name');
+                name = name.replace(/\[\d+\]/, '[' + numInc + ']');
+                $(this).attr('name', name);
+            });
+
+            newRow.find('input').val('');
+            $(element).parents('table').find('tbody').append(newRow);
+        }
+
+        const removeRow = (element) => {
+            count = $(element).closest('tbody').find('tr').length;
+            console.log(count);
+
+            if (count > 1) {
+                $(element).closest('tr').remove();
+            }
+        }
+    </script>
+@endpush

Modules/CostCalculator/resources/views/index.blade.php

@@ -0,0 +1,7 @@
+@extends('costcalculator::layouts.master')
+
+@section('content')
+    <h1>Hello World</h1>
+
+    <p>Module: {!! config('costcalculator.name') !!}</p>
+@endsection

Modules/CostCalculator/resources/views/layouts/master.blade.php

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="csrf-token" content="{{ csrf_token() }}">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
+    <title>CostCalculator Module - {{ config('app.name', 'Laravel') }}</title>
+
+    <meta name="description" content="{{ $description ?? '' }}">
+    <meta name="keywords" content="{{ $keywords ?? '' }}">
+    <meta name="author" content="{{ $author ?? '' }}">
+
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.bunny.net">
+    <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
+
+    {{-- Vite CSS --}}
+    {{-- {{ module_vite('build-costcalculator', 'resources/assets/sass/app.scss', storage_path('vite.hot')) }} --}}
+</head>
+
+<body>
+    @yield('content')
+
+    {{-- Vite JS --}}
+    {{-- {{ module_vite('build-costcalculator', 'resources/assets/js/app.js', storage_path('vite.hot')) }} --}}
+</body>

Modules/CostCalculator/routes/api.php

@@ -0,0 +1,19 @@
+<?php
+
+use Illuminate\Support\Facades\Route;
+use Modules\CostCalculator\Http\Controllers\CostCalculatorController;
+
+/*
+ *--------------------------------------------------------------------------
+ * API Routes
+ *--------------------------------------------------------------------------
+ *
+ * Here is where you can register API routes for your application. These
+ * routes are loaded by the RouteServiceProvider within a group which
+ * is assigned the "api" middleware group. Enjoy building your API!
+ *
+*/
+
+Route::middleware(['auth:sanctum'])->prefix('v1')->group(function () {
+    Route::apiResource('costcalculator', CostCalculatorController::class)->names('costcalculator');
+});

Modules/CostCalculator/routes/web.php

@@ -0,0 +1,19 @@
+<?php
+
+use Illuminate\Support\Facades\Route;
+use Modules\CostCalculator\Http\Controllers\CostCalculatorController;
+
+/*
+|--------------------------------------------------------------------------
+| Web Routes
+|--------------------------------------------------------------------------
+|
+| Here is where you can register web routes for your application. These
+| routes are loaded by the RouteServiceProvider within a group which
+| contains the "web" middleware group. Now create something great!
+|
+*/
+
+Route::group([], function () {
+    Route::resource('costcalculator', CostCalculatorController::class)->names('costcalculator');
+});

Modules/CostCalculator/vite.config.js

@@ -0,0 +1,57 @@
+import { defineConfig } from 'vite';
+import laravel from 'laravel-vite-plugin';
+import { readdirSync, statSync } from 'fs';
+import { join,relative,dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+export default defineConfig({
+    build: {
+        outDir: '../../public/build-costcalculator',
+        emptyOutDir: true,
+        manifest: true,
+    },
+    plugins: [
+        laravel({
+            publicDirectory: '../../public',
+            buildDirectory: 'build-costcalculator',
+            input: [
+                __dirname + '/resources/assets/sass/app.scss',
+                __dirname + '/resources/assets/js/app.js'
+            ],
+            refresh: true,
+        }),
+    ],
+});
+// Scen all resources for assets file. Return array
+//function getFilePaths(dir) {
+//    const filePaths = [];
+//
+//    function walkDirectory(currentPath) {
+//        const files = readdirSync(currentPath);
+//        for (const file of files) {
+//            const filePath = join(currentPath, file);
+//            const stats = statSync(filePath);
+//            if (stats.isFile() && !file.startsWith('.')) {
+//                const relativePath = 'Modules/CostCalculator/'+relative(__dirname, filePath);
+//                filePaths.push(relativePath);
+//            } else if (stats.isDirectory()) {
+//                walkDirectory(filePath);
+//            }
+//        }
+//    }
+//
+//    walkDirectory(dir);
+//    return filePaths;
+//}
+
+//const __filename = fileURLToPath(import.meta.url);
+//const __dirname = dirname(__filename);
+
+//const assetsDir = join(__dirname, 'resources/assets');
+//export const paths = getFilePaths(assetsDir);
+
+
+//export const paths = [
+//    'Modules/CostCalculator/resources/assets/sass/app.scss',
+//    'Modules/CostCalculator/resources/assets/js/app.js',
+//];

config/constants.php

@@ -78,4 +78,9 @@ return [
         14 => 'Archived',
     ],
 
+    'living_status'=> [
+        1 => 'Alone',
+        2 => 'With Spouse',
+        3 => 'With Spouse and Child',
+    ]
 ];

modules_statuses.json

@@ -17,5 +17,6 @@
     "Admin": true,
     "Drive": true,
     "Sitemap": true,
-    "Document": true
+    "Document": true,
+    "CostCalculator": true
 }

public/raffles/assets/js/style.js

@@ -584,16 +584,17 @@ document.addEventListener('keydown', e => {
 });
 
 
+// cost calculator progress
 // cost calculator progress
 
 let currentStep = 1;
-const totalSteps = 5;
+const totalSteps = 7; // updated to match HTML
 const monkey = document.getElementById('monkey').querySelector('img');
 const monkeyContainer = document.getElementById('monkey');
-const nextBtn = document.querySelector('.next-btn button');
+const nextBtn = document.getElementById('nextBtn');
+const doneBtn = document.getElementById('doneBtn');
 const bananalast = document.getElementById('b5');
 
-
 const monkeyImages = [
     "/raffles/assets/images/icons/monkey1.png",
     "/raffles/assets/images/icons/monkey2.png",
@@ -608,33 +609,25 @@ nextBtn.addEventListener('click', () => {
     if (currentStep < totalSteps) {
         currentStep++;
 
-        // Move monkey
+        // Calculate monkey position based on window width
+        let percent;
         if (window.innerWidth <= 540) {
-            const percent = ((currentStep - 1) / (totalSteps - 0.2)) * 100;
-            monkeyContainer.style.left = percent + '%';
-        }
-        else if (window.innerWidth <= 768) {
-            const percent = ((currentStep - 1) / (totalSteps - 0.3)) * 100;
-            monkeyContainer.style.left = percent + '%';
-        }
-        else if (window.innerWidth <= 992) {
-            const percent = ((currentStep - 1) / (totalSteps - 0.7)) * 100;
-            monkeyContainer.style.left = percent + '%';
-        }
-        else if (window.innerWidth <= 1180) {
-            const percent = ((currentStep - 1) / (totalSteps - 0.2)) * 100;
-            monkeyContainer.style.left = percent + '%';
-        }
-        else {
-            const percent = ((currentStep - 1) / (totalSteps - 0.5)) * 100;
-            monkeyContainer.style.left = percent + '%';
+            percent = ((currentStep - 1) / (totalSteps - 0.2)) * 100;
+        } else if (window.innerWidth <= 768) {
+            percent = ((currentStep - 1) / (totalSteps - 0.3)) * 100;
+        } else if (window.innerWidth <= 992) {
+            percent = ((currentStep - 1) / (totalSteps - 0.7)) * 100;
+        } else if (window.innerWidth <= 1180) {
+            percent = ((currentStep - 1) / (totalSteps - 0.2)) * 100;
+        } else {
+            percent = ((currentStep - 1) / (totalSteps - 0.5)) * 100;
         }
+        monkeyContainer.style.left = percent + '%';
 
-
-        // Change monkey image
+        // Update monkey image
         monkey.src = monkeyImages[currentStep - 1];
 
-        // Update step content
+        // Switch step content
         const currentContent = document.getElementById('step' + (currentStep - 1));
         const nextContent = document.getElementById('step' + currentStep);
         if (currentContent && nextContent) {
@@ -642,30 +635,29 @@ nextBtn.addEventListener('click', () => {
             nextContent.classList.add('active');
         }
 
-        // At final step (Step 5), hide Next and show Done
+        // Show done button on last step
         if (currentStep === totalSteps) {
             nextBtn.style.display = 'none';
             doneBtn.style.display = 'block';
         }
-    } w
+    }
 });
+
 doneBtn.addEventListener('click', () => {
     bananalast.classList.add('active');
 
     if (window.innerWidth <= 992) {
-        // On mobile: show 7th image and move down
-        monkey.src = monkeyImages[6]; // 7th image (index 6)
+        monkey.src = monkeyImages[6]; // last image
         monkeyContainer.style.top = '142%';
-        monkeyContainer.style.left = '40%'; // Optional: keep it centered or adjust as needed
+        monkeyContainer.style.left = '40%';
     } else {
-        // On desktop: show 6th image and move right
-        monkey.src = monkeyImages[5]; // 6th image (index 5)
+        monkey.src = monkeyImages[5];
         monkeyContainer.style.left = '110%';
-        monkeyContainer.style.top = '-120%'; // Reset top if changed previously
+        monkeyContainer.style.top = '-120%';
     }
 });
 
-// Final monkey image
+
 
 
 

resources/views/client/raffles/pages/cost-calculator.blade.php

@@ -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 --}}