form

public/css/style.css

@@ -195,6 +195,9 @@ p {
   /* line-height: 56px; */
   letter-spacing: -0.741px;
 }
+.v-center {
+  vertical-align: middle;
+}
 .steps {
     display: flex;
     justify-content: space-between;

resources/views/app/physicians/order-products/ligators.blade.php

@@ -31,29 +31,181 @@
     </div>
     <div class="col-lg-8">
       <h4 class="header">Order Snyder HemBand Ligators Today</h4>
-      <p class="mt-4">If you are a licensed health practitioner who is trained in the Snyder HemBand system, then you’re eligible to order ligators. Submit your order by calling at <a href="tel:{{ config('app.forPhysicianGeneralQuestionPhoneNumber') }}">{{ config('app.forPhysicianGeneralQuestionPhoneNumber') }}</a> , send us an order form at <a href="mailto:{{ config('app.forPhysicianGeneralQuestionEmailAddress') }}">{{ config('app.forPhysicianGeneralQuestionEmailAddress') }}</a>, or fax to (800) 886-9615.</p>
+      <p class="mt-4">If you are a licensed health practitioner who is trained in the Snyder HemBand system, then you’re eligible to order ligators.</p>
 
-      <div class="mb-3">
-        {{--<p class="mt-4">To submit an order via fax or email, please send back the form for the product(s) you wish to order.</p>--}}
-        <div class="row justify-content-center">
-          <div class="col-lg-4 col-md-6">
-            <h5 class="mb-3">Ligator Order Form</h5>
-            <a href="{{asset('ligator-order-form.pdf')}}" download="Ligator Order Form"><img src="{{asset('img/ligator-placeholder.png')}}" class="w-75 border border-dark" alt=""> </a>
+      <div class="bg-light border p-4 mb-4" id="formComponent">
+        <form class="" action="{{ route('submit-find-a-clinic') }}" method="post" autocomplete="off">
+          @csrf
+          <div class="row">
+            <div class="col-12">
+              @if($errors->any())
+              <div class="alert alert-danger fade show" role="alert">
+                  There were errors found!
+              </div>
+              @endif
+            </div>
+            <div class="col-lg-6 form-group mb-4">
+              <label>Order Date: <span class="text-danger">*</span> </label>
+              <input type="text" name="order_date" class="form-control bg-white rounded-0 py-3" disabled value="{{date('m/d/Y')}}">
+            </div>
+            <div class="col-lg-6 form-group mb-4">
+              <label>PO # (Optional):</label>
+              <input type="text" class="form-control rounded-0 py-3" name="postal_code" value="">
+            </div>
           </div>
-          <!-- <div class="col-lg-4 col-md-6">
-          <h5 class="mt-4 mb-3">Marketing Materials</h5>
-          <a href="#"><img  src="{{asset('img/marketing.jpeg')}}" class="w-75 border border-dark" alt=""> </a>
-        </div>
-        <div class="col-lg-4 col-md-6">
-          <h5 class="mt-4 mb-3">OBP ANOSPEC Anoscopes</h5>
-          <a href="#"><img  src="{{asset('img/obp.jpeg')}}" class="w-75 border border-dark" alt=""> </a>
-        </div> -->
-        </div>
+          <div class="row">
+            <div class="col-lg-6 form-group mb-4">
+              <label>Company name: <span class="text-danger">*</span></label>
+              <input type="text" class="form-control rounded-0 py-3" name="company_name" required value="">
+            </div>
+            <div class="col-lg-6 form-group mb-4">
+              <label>Group NPI:</label>
+              <input type="text" class="form-control rounded-0 py-3" name="group_npi" value="">
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-lg-6 form-group mb-4">
+              <label>Order physician name: <span class="text-danger">*</span></label>
+              <input type="text" class="form-control rounded-0 py-3" name="physician_name" required value="">
+            </div>
+            <div class="col-lg-6 form-group mb-4">
+              <label>Physician NPI:</label>
+              <input type="text" class="form-control rounded-0 py-3" name="physician_npi" value="">
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-lg-5 form-group mb-4">
+              <label>Purchasing contact name: <span class="text-danger">*</span></label>
+              <input type="text" class="form-control rounded-0 py-3" name="purchasing_contact_name" required value="">
+            </div>
+            <div class="col-lg-3 form-group mb-4">
+              <label>Phone Number:</label>
+              <input type="tel" class="form-control rounded-0 py-3 phone" name="phone" value="">
+            </div>
+            <div class="col-lg-4 form-group mb-4">
+              <label>Email:</label>
+              <input type="email" class="form-control rounded-0 py-3" name="email" value="">
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-lg-6 form-group mb-4">
+              <label>Shipping Address: <span class="text-danger">*</span></label>
+              <input type="text" class="form-control rounded-0 py-3" name="line_1" required value="">
+            </div>
+            <div class="col-lg-6 form-group mb-4">
+              <label>Line 2:</label>
+              <input type="text" class="form-control rounded-0 py-3" name="line_2" value="">
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-lg-5 form-group mb-4">
+              <label>City: <span class="text-danger">*</span></label>
+              <input type="text" class="form-control rounded-0 py-3" name="city" required value="">
+            </div>
+            <div class="col-lg-3 form-group mb-4">
+              <label>State: <span class="text-danger">*</span></label>
+              <input type="text" class="form-control rounded-0 py-3" name="state" value="">
+            </div>
+            <div class="col-lg-4 form-group mb-4">
+              <label>Zip: <span class="text-danger">*</span></label>
+              <input type="text" class="form-control rounded-0 py-3 zip" name="zip" value="">
+            </div>
+          </div>
+          <div class="mb-4 table-responsive">
+            <p class="mb-1">Item(s) Ordered</p>
+            <table class="table table-bordered table-sm">
+              <thead class="bg-info bg-opacity-10">
+                <tr>
+                  <th>Ref No</th>
+                  <th>Item</th>
+                  <th>Quantity</th>
+                  <th>Price / Unit</th>
+                  <th>Total Moment</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td class="p-3 v-center">DS905727</td>
+                  <td class="p-3 v-center">
+                    <div class="">
+                      <div class="mb-4">
+                        <img src="{{asset('img/snyder.png')}}" class="w-100" alt="">
+                      </div>
+                      <p>Snyder HemBand<sup>TM</sup> disposable hemorrhoidal ligator with integrated obturator.</p>
+                      <p>1 individual package.</p>
+                      <p>Includes 3 latex bands. Latex-free bands available upon request.</p>
+                    </div>
+                  </td>
+                  <td class="p-3 v-center">
+                    <input type="number" name="quantity" min="1" v-model="quantity" class="form-control rounded-0 text-center" value="">
+                  </td>
+                  <td class="p-3 v-center">$70.00 per unit</td>
+                  <td class="p-3 v-center">
+                    <div class="d-flex align-items-baseline">
+                      <span>$</span> <input type="text" name="total" disabled class="form-control border-0 bg-transparent rounded-0 border-bottom border-dark" :value="quantity * 70">
+                    </div>
+                  </td>
+                </tr>
+                <tr v-if="quantity">
+                  <td colspan="5">
+                    <textarea name="memo" class="form-control" placeholder="Order memo (optional)" rows="5" cols="80"></textarea>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+            <small><em>Prices are inclusive of all taxes. Prices valid in the U.S. only.</em></small>
+          </div>
+          <div class="form-group mb-4">
+            <p class="mb-2">Delivery Options</p>
+            <div class="form-check">
+              <label class="ms-2 mb-2 pointer">
+                <input type="radio" required class="form-check-input" name="delivery_options" value="FedFedEx Standard Overnight (Next business day by 3PM) - FREE OF CHARGE">
+                <span>FedFedEx Standard Overnight (Next business day by 3PM) - FREE OF CHARGE</span>
+              </label>
+              <label class="ms-2 mb-2 pointer">
+                <input type="radio" required class="form-check-input" name="delivery_options" value="FedEx Priority Overnight (Next business day by 10AM) - $40.00">
+                <span>FedEx Priority Overnight (Next business day by 10AM) - $40.00</span>
+              </label>
+              <label class="ms-2 mb-2 pointer">
+                <input type="radio" required class="form-check-input" name="delivery_options" value="FedEx First Overnight (Next business day by 8AM) - $150.00">
+                <span>FedEx First Overnight (Next business day by 8AM) - $150.00</span>
+              </label>
+            </div>
+            <small><em>* Priority and First Overnight shipping rates apply to a box of 20 units. Shipping rates may vary, subject to order quantity. FedEx does not deliver to PO Box/APO addresses. Some FedEx services are not available in all areas. Please note that all orders placed after 1pm EST will be processed next business day. No Saturday or Sunday delivery.</em> </small>
+          </div>
+          <div class="form-group mb-4">
+            <p class="mb-2">Payment Method</p>
+            <p><b>After you submit this form, you will receive an invoice with secure payment options.</b></p>
+          </div>
+          <div class="form-check mb-4">
+            <input class="form-check-input" type="checkbox" required value="">
+            <label class="form-check-label pointer">
+              By submitting this order, buyer has read, understands, and agrees to MDE Medical's <a href="{{route('terms')}}">Terms and Conditions</a>. Any overdue payments shall bear interest at a rate equal to the lesser of: (i) 1.5% per month, or (ii) the maximum amount permitted by law, assessed from the date payment was initially due.
+            </label>
+          </div>
+          <div class="">
+            <button type="button" class="btn btn-outline-pry px-5 py-2 me-3" data-bs-toggle="modal" data-bs-target="#confirmClearForm">Clear Form</button>
+            <button type="submit" class="btn btn-pry px-5 py-2">Submit Order</button>
+          </div>
+          <div class="modal fade" id="confirmClearForm" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="confirmClearFormLabel" aria-hidden="true">
+            <div class="modal-dialog modal-dialog-centered">
+              <div class="modal-content">
+                <div class="modal-body">
+                  <p>Are you sure you want to clear this form?</p>
+                  <div class="">
+                    <button type="button" class="btn btn-outline-dark me-2 px-4" data-bs-dismiss="modal">No</button>
+                    <a href="{{route('physicians.order-products-ligators')}}" class="btn btn-danger px-4">Yes</a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </form>
       </div>
 
       <p>However, if you or your practice have not received training on the Snyder HemBand System, you can request training online and we will contact you shortly to schedule.</p>
       <div class="text-center my-4">
-        <a href="{{route('physicians.get-trained')}}" class="btn btn-pry px-5 py-3">Schedule Training</a>
+        <a href="{{route('physicians.get-trained')}}" class="btn btn-secondary rounded-0 px-5 py-3">Schedule Training</a>
       </div>
 
       <h5 class="header">About our Ligator</h5>
@@ -75,5 +227,16 @@
     </div>
   </div>
 </div>
+<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
+<script type="text/javascript">
+  var formComponent = new Vue({
+    el: '#formComponent',
+    data: {
+      quantity: null
+    },
+    method: {
 
-@endsection
+    }
+  })
+</script>
+@endsection

resources/views/layouts/physicians.blade.php

@@ -18,7 +18,7 @@
                 </a>
                 <div>
                     <div class="d-flex align-items-center">
-                      <a class="d-lg-none d-inline btn rounded-0 btn-pry px-3 py-2" href="{{ route('physicians.get-trained') }}">Get Trained</a>
+                      <a class="d-lg-none d-inline btn rounded-0 btn-pry px-3 py-2" href="{{ route('physicians.order-products-ligators') }}">Order Now</a>
                       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navBar" aria-controls="navBar" aria-expanded="false" aria-label="Toggle navigation">
                           <i class="fas fa-bars"></i>
                       </button>
@@ -28,14 +28,15 @@
                             <!-- <li class="nav-item">
                                 {{--<a class="nav-link" href="{{ route('physicians.instructions-for-use') }}">Instructions</a> --}}
                             </li> -->
+                            <li class="nav-item">
+                              <a class="nav-link" href="{{ route('physicians.get-trained') }}">Get Trained</a>
+                            </li>
                             <li class="nav-item">
                                 <a class="nav-link" href="{{ route('physicians.practice-support') }}">Practice Support</a>
                             </li>
-                            {{--
-                              <li class="nav-item">
-                                  <a class="nav-link" href="{{ route('physicians.order-products') }}">Order Products</a>
-                              </li>
-                               --}}
+                            <li class="nav-item">
+                              <a class="nav-link" href="{{ route('physicians.order-products') }}">Order Products</a>
+                            </li>
                             <!-- <li class="nav-item">
                                 <a class="nav-link" href="{{ route('physicians.fda-registration') }}">FDA Registration</a>
                             </li> -->
@@ -43,7 +44,7 @@
                               <a class="nav-link" href="{{ route('physicians.contact-us') }}">Contact Us</a>
                             </li>
                             <li class="nav-item d-lg-block d-none">
-                                <a class="btn px-4 py-2 rounded-0 btn-pry" href="{{ route('physicians.get-trained') }}">Get Trained</a>
+                                <a class="btn px-4 py-2 rounded-0 btn-pry" href="{{ route('physicians.order-products-ligators') }}">Order Now</a>
                             </li>
                         </ul>
                     </div>
@@ -77,7 +78,7 @@
               <div class="col-lg-3 col-md-4">
                 <p class="mb-2"><a href="{{ route('index') }}" class="text-white">Snyder Hemband</a></p>
                 <p class="mb-2"><a href="{{route('physicians.practice-support')}}" class="text-white">Practice Support</a></p>
-                {{-- <p class="mb-2"><a href="{{route('physicians.order-products')}}" class="text-white">Order Products</a></p> --}}
+                <p class="mb-2"><a href="{{route('physicians.order-products')}}" class="text-white">Order Products</a></p>
 
               </div>
               <div class="col-lg-3 col-md-3 offset-lg-0 offset-md-1">

routes/web.php

@@ -36,11 +36,11 @@ Route::prefix('/physicians/')->name('physicians.')->group(function () {
     Route::get('/practice-support/reimbursement-guide', [PhysiciansController::class, 'practiceSupportReimbursement'])->name('practice-support-reimbursement');
     Route::get('/practice-support/directory-listing', [PhysiciansController::class, 'practiceSupportDirectoryListing'])->name('practice-support-directory');
     Route::post('/practice-support/submit-directory-listing', [PhysiciansController::class, 'submitPracticeSupportDirectoryListing'])->name('submit-practice-support-directory-listing-request');
-    // Route::get('/order-products', [PhysiciansController::class, 'orderProducts'])->name('order-products');
-    // Route::get('/order-products/ligators', [PhysiciansController::class, 'orderProductsLigators'])->name('order-products-ligators');
-    // Route::get('/order-products/marketing-materials', [PhysiciansController::class, 'orderProductsMarketing'])->name('order-products-marketing');
-    // Route::post('/order-products/submit-marketing-materials-request', [PhysiciansController::class, 'submitOrderProductsMarketing'])->name('submit-order-products-marketing');
-    // Route::get('/order-products/obp', [PhysiciansController::class, 'orderProductsObp'])->name('order-products-obp');
+    Route::get('/order-products', [PhysiciansController::class, 'orderProducts'])->name('order-products');
+    Route::get('/order-products/ligators', [PhysiciansController::class, 'orderProductsLigators'])->name('order-products-ligators');
+    Route::get('/order-products/marketing-materials', [PhysiciansController::class, 'orderProductsMarketing'])->name('order-products-marketing');
+    Route::post('/order-products/submit-marketing-materials-request', [PhysiciansController::class, 'submitOrderProductsMarketing'])->name('submit-order-products-marketing');
+    Route::get('/order-products/obp', [PhysiciansController::class, 'orderProductsObp'])->name('order-products-obp');
     Route::get('/fda-registration', [PhysiciansController::class, 'fdaRegistration'])->name('fda-registration');
     Route::get('/contact-us', [PhysiciansController::class, 'contactUs'])->name('contact-us');
     Route::post('/submit-contact-us', [PhysiciansController::class, 'submitContactUs'])->name('submit-contact-us');