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

@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