@extends('layouts.hcp')
@section('content')

<div class="bg-light d-lg-block d-none">
  <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"><a href="{{route('hcp.index')}}"><u>Healthcare Professionals</u></a></li>
        <li class="breadcrumb-item"><a href="{{route('hcp.order-products')}}"><u>Order Products</u></a></li>
        <li class="breadcrumb-item active" aria-current="page">Request Samples</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="title m-0">Request Samples</h5>
      </div>
    </div>
  </div>
</div>

<div class="container py-5">
  <div class="row">
    <div class="col-lg-3 d-lg-block d-none">
      @include('app.hcp.order-products.sidenav')
    </div>
    <div class="col-lg-8">
      <div class="d-flex flex-column">
        <div class="order-lg-1 order-2">
          <h4 class="header">Order Snyder HemBand Samples Today!</h4>
          <p class="mt-3 mb-4">If you are a licensed healthcare practitioner in the United States, you’re eligible to request Snyder HemBand samples using this online form. You may also email us at <u><a href="mailto:support@hemband.com">support@hemband.com</a></u> for assistance.</p>
        </div>
        <div class="mb-4 order-lg-2 order-1">
            <img src="{{asset('img/snyder.png')}}" class="w-100" alt="">
        </div>
      </div>
      <div class="bg-light border p-4 mb-4" id="formComponent">
          <form class="" action="{{ route('hcp.submit-request-samples') }}" 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

                      @if(session('success'))
                    <div class="alert alert-success fade show" role="alert">
                      <p class="mb-1">Thank you. We have received your request.</p>

                      <p class="mb-1">Your request # is: {{ session('orderIID') }}</p>
                    </div>
                    @endif


                  </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="{{ old('company_name') }}">
                      @error('company_name')
                        <small class="text-warning">{{$message}}</small>
                      @enderror
                  </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="{{ old('group_npi') }}">
                      @error('group_npi')
                        <small class="text-warning">{{$message}}</small>
                      @enderror
                  </div>
              </div>
              <div class="row">
                  <div class="col-lg-6 form-group mb-4">
                      <label>Ordering physician name: <span class="text-danger">*</span></label>
                      <input type="text" class="form-control rounded-0 py-3" name="order_phyisician_name" required value="{{ old('order_phyisician_name') }}">
                      @error('order_phyisician_name')
                        <small class="text-warning">{{$message}}</small>
                      @enderror
                  </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="{{ old('physician_npi') }}">
                      @error('physician_npi')
                        <small class="text-warning">{{$message}}</small>
                      @enderror
                  </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="{{ old('purchasing_contact_name') }}">
                      @error('purchasing_contact_name')
                        <small class="text-warning">{{$message}}</small>
                      @enderror
                  </div>
                  <div class="col-lg-3 form-group mb-4">
                      <label>Phone Number: <span class="text-danger">*</span></label>
                      <input type="tel" class="form-control rounded-0 py-3 phone" required name="phone_number" value="{{ old('phone_number') }}">
                      @error('phone_number')
                        <small class="text-warning">{{$message}}</small>
                      @enderror
                  </div>
                  <div class="col-lg-4 form-group mb-4">
                      <label>Email: <span class="text-danger">*</span></label>
                      <input type="email" class="form-control rounded-0 py-3" required name="email" value="{{ old('email') }}">
                      @error('email')
                        <small class="text-warning">{{$message}}</small>
                      @enderror
                  </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="shipping_address" required value="{{ old('shipping_address') }}">
                      @error('shipping_address')
                        <small class="text-warning">{{$message}}</small>
                      @enderror
                  </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="{{ old('line_2') }}">
                      @error('line_2')
                        <small class="text-warning">{{$message}}</small>
                      @enderror
                  </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="{{ old('city') }}">
                      @error('city')
                        <small class="text-warning">{{$message}}</small>
                      @enderror
                  </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="{{ old('state') }}">
                      @error('state')
                        <small class="text-warning">{{$message}}</small>
                      @enderror
                  </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="{{ old('zip') }}">
                      @error('zip')
                        <small class="text-warning">{{$message}}</small>
                      @enderror
                  </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>
                          </tr>
                      </thead>
                      <tbody>
                          <tr>
                              <td class="p-3 v-center">DS905727</td>
                              <td class="p-3 v-center">
                                  <div class="">
                                      <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>
                          </tr>
                      </tbody>
                  </table>
              </div>
              <div class="form-check mb-4">
                  <label class="form-check-label pointer">
                    <input class="form-check-input" type="checkbox" name="agrees_to_terms" required />
                      By submitting this request, I confirm that I am a physician or otherwise duly licensed healthcare practitioner authorized to provide hemorrhoid ligation treatment services in the United States.
                  </label>
              </div>
              <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 class="d-sm-flex btn-fw">
                  <button type="button" class="btn btn-outline-pry px-5 py-2 me-sm-3 mb-sm-0 mb-3 d-block" data-bs-toggle="modal" data-bs-target="#confirmClearForm">Clear Form</button>
                  <button type="submit" class="btn btn-pry px-5 py-2 d-block">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('hcp.order-products-ligators')}}" class="btn btn-danger px-4">Yes</a>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </form>
      </div>
    </div>
  </div>
</div>
@endsection
