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

    .noUiSlider {
        margin: 58px 0;
        padding: 0 15px;
    }
</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-4">
  <div class="row justify-content-center">
    <div class="col-lg-8">
      <div class="container shadow p-4">
          <div class="row justify-content-center">
              @if(session('success'))
              <div class="col-12">
                  <div class="alert alert-success" role="alert">
                      <h4 class="alert-heading">Congratulations!!</h4>
                      <p>You have successfully completed this survey. Eligible submissions will receive a digital gift cards in 7 business days to the email provided in the survey. </p>
                      <hr>
                      <p class="mb-0">Questions? please feel free to write us at <a href="mailto:info@hemband.com">info@hemband.com</a> or call us at <a href="tel:(800) 242-6145">(800) 242-6145</a></p>
                  </div>
              </div>
              @else
              <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="">
                                  <div class="row">
                                      <div class="col-md-12 mb-3">
                                          <div class="form-group">
                                              <label>Name<sup class="text-danger">*</sup></label>
                                              <input type="text" class="form-control" name="name" value="{{ old('name') }}" required />
                                          </div>
                                      </div>
                                      <div class="col-md-6 mb-3">
                                          <div class="form-group">
                                              <label>Email<sup class="text-danger">*</sup></label>
                                              <input type="email" class="form-control" name="email" value="{{ old('email') }}" required />
                                              <small class="text-muted">(to receive digital gift card)</small>
                                          </div>
                                      </div>
                                      <div class="col-md-6 mb-3">
                                          <div class="form-group">
                                              <label>Cell Number</label>
                                              <input type="text" class="form-control" name="cell_number" value="{{ old('cell_number') }}" />
                                          </div>
                                      </div>
                                  </div>
                                  <div class="row">
                                      <div class="col-md-6 mb-3">
                                          <div class="form-group ">
                                              <label>Practice Address Line 1</label>
                                              <input type="text" class="form-control" name="practice_address_line_1" value="{{ old('practice_address_line_1') }}" />
                                          </div>
                                      </div>
                                      <div class="col-md-6 mb-3">
                                          <div class="form-group ">
                                              <label>Practice Address Line 2</label>
                                              <input type="text" class="form-control" name="practice_address_line_2" value="{{ old('practice_address_line_2') }}" />
                                          </div>
                                      </div>
                                      <div class="col-md-6 mb-3">
                                          <div class="form-group ">
                                              <label>Practice Address City</label>
                                              <input type="text" class="form-control" name="practice_address_city" value="{{ old('practice_address_city') }}" />
                                          </div>
                                      </div>
                                      <div class="col-md-6 mb-3">
                                          <div class="form-group">
                                              <label>Practice Address State</label>
                                              <select class="form-control" name="practice_address_state">
                                                  <option value=""></option>
                                                  @foreach(config('constants.us_states') as $stateKey => $stateLabel)
                                                  <option value="{{ $stateKey }}" <?= old('practice_address_state') === $stateKey ? 'selected':'' ?>>{{ $stateLabel }}</option>
                                                  @endforeach
                                              </select>
                                          </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">
                                      <label class="me-3"><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" value="{{ old('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>
                                  <input type="hidden" name="years_in_practice" :value="form.years_in_practice" />
                              </div>

                          </div>
                      </div>
                      <div class="row mb-3">
                          <div class="col-12 question">
                              <div class="form-group">
                                  <label>Where do you perform your regular procedures?</label>
                                  <div class="d-flex flex-column">
                                      <label><input type="checkbox" name="where_do_you_perform_regular_procedures[]" value="Office"> <span>Office</span></label>
                                      <label><input type="checkbox" name="where_do_you_perform_regular_procedures[]" value="Endoscopy Center"> <span>Endoscopy Center</span></label>
                                      <label><input type="checkbox" name="where_do_you_perform_regular_procedures[]" value="ASC"> <span>ASC</span></label>
                                      <label><input type="checkbox" name="where_do_you_perform_regular_procedures[]" value="Hospital"> <span>Hospital</span></label>
                                  </div>
                              </div>

                          </div>
                      </div>
                      <div class="row mb-3">
                          <div class="col-12 question">
                              <div class="form-group">
                                  <label>Do you perform any procedures for the Hemorrhoids?</label>
                                  <div class="d-flex">
                                      <label class="me-3"><input type="radio" name="do_you_perform_any_procedures_for_the_hemorrhoids" v-model="form.do_you_perform_any_procedures_for_the_hemorrhoids" value="YES" /> <span>Yes</span></label>
                                      <label><input type="radio" name="do_you_perform_any_procedures_for_the_hemorrhoids" v-model="form.do_you_perform_any_procedures_for_the_hemorrhoids" value="NO" /> <span>No, I refer to the speciality centers</span></label>
                                  </div>
                              </div>
                              <div v-if="form.do_you_perform_any_procedures_for_the_hemorrhoids == 'YES'" class="form-group">
                                  <label>If yes, what types of the procedures you preform?<sup class="text-danger">*</sup></label>
                                  <div class="d-flex flex-column">
                                      <label><input type="checkbox" name="what_types_of_the_procedures_you_preform[]" value="Hemorrhoid Banding" /> <span>Hemorrhoid Banding</span></label>
                                      <label><input type="checkbox" name="what_types_of_the_procedures_you_preform[]" value="Infrared Coagulation" /> <span>Infrared Coagulation</span></label>
                                      <label><input type="checkbox" name="what_types_of_the_procedures_you_preform[]" value="Sclerotherapy" /> <span>Sclerotherapy</span></label>
                                      <label><input type="checkbox" name="what_types_of_the_procedures_you_preform[]" value="Hemorrhoid stapling" /> <span>Hemorrhoid stapling</span></label>
                                      <label><input type="checkbox" name="what_types_of_the_procedures_you_preform[]" value="Hemorrhoidectomy" /> <span>Hemorrhoidectomy</span></label>
                                  </div>
                              </div>

                          </div>
                      </div>
                      <div class="row mb-3">
                          <div class="col-12 question">
                              <div class="form-group">
                                  <label>Have you ever tried or used banding technics using Rubber band ligation?</label>
                                  <div class="d-flex">
                                      <label class="me-3"><input type="radio" name="used_banding_technics_using_rubber_band_ligation" v-model="form.used_banding_technics_using_rubber_band_ligation" value="YES" /> <span>Yes</span></label>
                                      <label class="me-3"><input type="radio" name="used_banding_technics_using_rubber_band_ligation" v-model="form.used_banding_technics_using_rubber_band_ligation" value="NO" /> <span>No</span></label>
                                  </div>
                              </div>
                              <div v-if="form.used_banding_technics_using_rubber_band_ligation == 'YES'" class="form-group">
                                  <label>If yes, what is your experience with RBL treatment for hemorrhoids?<sup class="text-danger">*</sup></label>
                                  <textarea class="form-control" name="experience_with_rbl_treatment_for_hemorrhoids"></textarea>
                              </div>
                              <div v-if="form.used_banding_technics_using_rubber_band_ligation == 'NO'" class="form-group">
                                  <label>If No, Would you like to learn more about hemorroidal treatment option using rubber band ligation?<sup class="text-danger">*</sup></label>
                                  <div class="d-flex">
                                      <label class="me-3"><input type="radio" name="interested_to_learn_more_about_hemorroidal_treatment_option_using_rubber_band_ligation" value="YES" /> <span>Yes</span></label>
                                      <label class="me-3"><input type="radio" name="interested_to_learn_more_about_hemorroidal_treatment_option_using_rubber_band_ligation" value="NO" /> <span>No</span></label>
                                      <label><input type="radio" name="interested_to_learn_more_about_hemorroidal_treatment_option_using_rubber_band_ligation" value="NOT SURE" /> <span>Not sure</span></label>
                                  </div>
                              </div>

                          </div>
                      </div>

                      <div class="row mb-3">
                          <div class="col-12 question">
                              <div class="form-group">
                                  <label>Would you like to recive free samples of the Snyder HemBand?</label>
                                  <div class="d-flex">
                                      <label class="me-3"><input type="radio" name="recive_free_samples_of_the_snyder_hem_band" value="YES" /> <span>Yes</span></label>
                                      <label class="me-3"><input type="radio" name="recive_free_samples_of_the_snyder_hem_band" value="NO" /> <span>No</span></label>
                                  </div>
                              </div>
                          </div>
                      </div>

                      <div class="row mb-3">
                          <div class="col-12 question">
                              <div class="form-group">
                                  <label>What would be the best way to contact you?</label>
                                  <div class="d-flex">
                                      <label class="me-3"><input type="radio" name="best_way_to_contact_you" value="Phone Call" /> <span>Phone call</span></label>
                                      <label class="me-3"><input type="radio" name="best_way_to_contact_you" value="Email" /> <span>Email</span></label>
                                      <label><input type="radio" name="best_way_to_contact_you" value="Text" /> <span>Text</span></label>
                                  </div>
                              </div>
                          </div>
                      </div>

                      <div class="row mb-3">
                          <div class="col-12 question">
                              <div class="form-group">
                                  <label>Preferred time to call:</label>
                                  <div class="d-flex flex-wrap mb-3">
                                      <label class="me-3 text-muted">Day(s):</label>
                                      <label class="me-3"><input type="checkbox" name="preferred_day_to_call[]" value="Monday" /> <span>M</span></label>
                                      <label class="me-3"><input type="checkbox" name="preferred_day_to_call[]" value="Tuesday" /> <span>Tu</span></label>
                                      <label class="me-3"><input type="checkbox" name="preferred_day_to_call[]" value="Wednesday" /> <span>W</span></label>
                                      <label class="me-3"><input type="checkbox" name="preferred_day_to_call[]" value="Thursday" /> <span>Th</span></label>
                                      <label class="me-3"><input type="checkbox" name="preferred_day_to_call[]" value="Friday" /> <span>F</span></label>
                                      <label class="me-3"><input type="checkbox" name="preferred_day_to_call[]" value="Saturday" /> <span>Sa</span></label>
                                      <label class="me-3"><input type="checkbox" name="preferred_day_to_call[]" value="Sunday" /> <span>Su</span></label>
                                  </div>
                                  <div class="d-flex flex-wrap mb-3">
                                      <label class="me-3 text-muted">Time(s) <small>(your local time)</small>:</label>
                                      <label class="me-3"><input type="checkbox" name="preferred_time_to_call[]" value="8-10" /> <span>8-10</span></label>
                                      <label class="me-3"><input type="checkbox" name="preferred_time_to_call[]" value="10-12" /> <span>10-12</span></label>
                                      <label class="me-3"><input type="checkbox" name="preferred_time_to_call[]" value="12-2" /> <span>12-2</span></label>
                                      <label class="me-3"><input type="checkbox" name="preferred_time_to_call[]" value="2-4" /> <span>2-4</span></label>
                                      <label class="me-3"><input type="checkbox" name="preferred_time_to_call[]" value="4-6" /> <span>4-6</span></label>
                                  </div>
                              </div>
                          </div>
                      </div>

                      <div class="row mb-3">
                          <div class="col-12 question">
                              <div class="form-group">
                                  <label>Your comments</label>
                                  <textarea name="your_comments" class="form-control"></textarea>
                              </div>
                          </div>
                      </div>

                      <div class="row mt-3">
                          <div class="col-md-12">
                              <div class="form-group mb-4">
                                  {!! htmlFormSnippet() !!}
                                  @error('g-recaptcha-response')
                                  <small class="text-danger"><i class="fas fa-exclamation-triangle mr-2"></i>Invalid</small>
                                  @enderror
                              </div>
                          </div>
                          <div class="col-12">
                              <button type="submit" class="btn btn-pry w-100 py-3">SUBMIT</button>
                          </div>
                      </div>
                  </form>
              </div>
              @endif
          </div>
      </div>
    </div>
  </div>
</div>

<script>
    var surveyQuestionsComponent = new Vue({
        el: '#surveyQuestionsComponent',
        data: {
            form: {
                are_you_a_gastroenterologist: "{{ old('are_you_a_gastroenterologist') }}",
                years_in_practice: "{{ old('years_in_practice') }}"
            }
        },
        methods: {
            initRangeSlider: function() {
                var self = this;
                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,
                    pips: {
                        mode: 'steps',
                        format: format
                    },
                });
                slider.noUiSlider.on('update', function(values, handle) {
                    self.form.years_in_practice = values[0];
                });

                @if(old('years_in_practice'))
                    slider.noUiSlider.set(old('years_in_practice'));
                @endif
            },
            init: function() {
                this.initRangeSlider();
            }
        },
        mounted: function() {
            this.init();
        }
    });
</script>

@endsection