Survey questionnaire

app/Http/Controllers/AppController.php

@@ -43,6 +43,9 @@ class AppController extends Controller
     public function terms() {
       return view('app.terms');
     }
+    public function surveyQuestions(){
+      return view('app.survey-questions');
+    }
     public function findAClinic() {
       return view('app.find-a-clinic');
     }

resources/views/app/survey-questions.blade.php

@@ -0,0 +1,155 @@
+@extends('layouts.app')
+@section('content')
+<link rel="stylesheet" href="{{ asset('css/nouislider.min.css') }}" />
+<script src="{{ asset('js/nouislider.min.js') }}"></script>
+
+<style>
+    .form-group label {
+        font-weight: 500;
+    }
+
+    .form-group label span {
+        font-weight: 400;
+    }
+</style>
+<div class="bg-light">
+    <div class="container pt-3">
+        <nav class="mb-0">
+            <ol class="breadcrumb">
+                <li class="breadcrumb-item"><a href="{{route('index')}}"><u>Home</u></a></li>
+                <li class="breadcrumb-item active" aria-current="page">Survey Questions</li>
+            </ol>
+        </nav>
+    </div>
+</div>
+<div class="bg-grey py-5">
+    <div class="container">
+        <div class="row justify-content-center">
+            <div class="col-lg-7 text-center">
+                <h5 class="subtitle">Survey Questions</h5>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="container py-5">
+    <div class="row justify-content-center">
+        <div id="surveyQuestionsComponent" class="col-md-12">
+            <form action="{{ route('submit-survey-questions') }}" method="POST">
+                @csrf
+                <div class="row mb-3">
+                    <div class="col-12">
+                        <div class="bg-light border p-3">
+                            <div class="row">
+                                <div class="col-md-4">
+                                    <div class="form-group">
+                                        <label>Name<sup class="text-danger">*</sup></label>
+                                        <input type="text" class="form-control" name="name" required />
+                                    </div>
+                                </div>
+                                <div class="col-md-4">
+                                    <div class="form-group">
+                                        <label>Email</label>
+                                        <input type="email" class="form-control" name="email" />
+                                        <small class="text-muted">(to receive digital gift card)</small>
+                                    </div>
+                                </div>
+                                <div class="col-md-4">
+                                    <div class="form-group">
+                                        <label>Cell Number</label>
+                                        <input type="text" class="form-control" name="cellNumber" />
+                                    </div>
+                                </div>
+                                <div class="col-md-12">
+                                    <div class="form-group">
+                                        <label>Practice Address</label>
+                                        <input type="text" class="form-control" name="practiceAddress" />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="row mb-3">
+                    <div class="col-12 question">
+                        <div class="form-group">
+                            <label>Are you a gastroenterologist?</label>
+                            <div class="d-flex flex-column">
+                                <label><input type="radio" name="are_you_a_gastroenterologist" v-model="form.are_you_a_gastroenterologist" value="YES" /> <span>Yes</span></label>
+                                <label><input type="radio" name="are_you_a_gastroenterologist" v-model="form.are_you_a_gastroenterologist" value="NO" /> <span>No</span></label>
+                            </div>
+                        </div>
+                        <div v-if="form.are_you_a_gastroenterologist == 'NO'" class="form-group">
+                            <label>Your speciality?<sup class="text-danger">*</sup></label>
+                            <input type="text" class="form-control" name="your_specialty" required />
+                        </div>
+
+                    </div>
+                </div>
+                <div class="row mb-3">
+                    <div class="col-12 question">
+                        <div class="form-group">
+                            <label>Years in practice</label>
+                            <div id="rangeSlider" class="noUiSlider"></div>
+                        </div>
+
+                    </div>
+                </div>
+                <div class="row mt-3">
+                    <div class="col-12">
+                        <button type="submit" class="btn btn-pry w-100 py-3">SUBMIT</button>
+                    </div>
+                </div>
+            </form>
+        </div>
+
+    </div>
+</div>
+
+<script>
+    var surveyQuestionsComponent = new Vue({
+        el: '#surveyQuestionsComponent',
+        data: {
+            form: {
+                are_you_a_gastroenterologist: null
+            }
+        },
+        methods: {
+            initRangeSlider: function() {
+                var slider = document.getElementById('rangeSlider');
+                var format = {
+                    to: function(value) {
+                        return Math.round(value);
+                    },
+                    from: function(value) {
+                        return Math.round(value);
+                    }
+                };
+
+                noUiSlider.create(slider, {
+                    start: 0,
+                    connect: 'lower',
+                    range: {
+                        'min': 0,
+                        'max': 70
+                    },
+                    step: 1,
+                    tooltips: true,
+                    format: format
+                });
+                slider.noUiSlider.on('update', function(values, handle) {
+                    console.log({
+                        values
+                    });
+                });
+            },
+            init: function() {
+                this.initRangeSlider();
+            }
+        },
+        mounted: function() {
+            this.init();
+        }
+    });
+</script>
+
+@endsection

routes/web.php

@@ -28,6 +28,8 @@ Route::get('/contact-us', [AppController::class, 'contact'])->name('contact');
 Route::post('/submit-contact-us', [AppController::class, 'submitContact'])->name('submit-contact');
 Route::get('/privacy-policy', [AppController::class, 'privacy'])->name('privacy');
 Route::get('/terms-of-service', [AppController::class, 'terms'])->name('terms');
+Route::get('/survey-questions', [AppController::class, 'surveyQuestions'])->name('survey-questions');
+Route::post('/submit-survey-questions', [AppController::class, 'submitSurveyQuestions'])->name('submit-survey-questions');
 
 Route::prefix('/hcp/')->name('hcp.')->group(function () {
     Route::get('/', [PhysiciansController::class, 'index'])->name('index');