<div class="bg-light border p-4 mb-4" id="formComponent">
    <form class="" action="{{ route('hcp.submit-order-ligators') }}" 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 order.</p>

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

                <p class="mb-1">We will be sending you an email shortly with secure payment options.</p>
              </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" readonly value="{{date('m/d/Y')}}">
                @error('order_date')
                  <small class="text-warning">{{$message}}</small>
                @enderror
            </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="purchase_order_number" value="{{ old('purchase_order_number') }}">
                @error('purchase_order_number')
                  <small class="text-warning">{{$message}}</small>
                @enderror
            </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>
                        <th>Quantity</th>
                        <th>Price / Unit</th>
                        <th>Total Amount</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" required v-model="quantity" class="form-control rounded-0 text-center" value="">
                            @error('quantity')
                                <small class="text-warning">{{$message}}</small>
                            @enderror
                        </td>
			<td class="p-3 v-center">
				<div class="mb-2" style="text-decoration: line-through">
					$70 per unit
				</div>
				<div style="font-weight: bold">
					$35.00 per unit
				</div>
			</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 text-center rounded-0 border-bottom border-dark" :value="quantity * 35 || ''">
                            </div>
                        </td>
                    </tr>
                    <tr v-if="quantity">
                        <td colspan="5">
                            <textarea name="memo" class="form-control" placeholder="Order memo (optional)" rows="5" cols="80">{{ old('memo') }}</textarea>
                            @error('memo')
                            <small class="text-warning">{{$message}}</small>
                            @enderror
                        </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_option" 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_option" 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_option" 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" name="agrees_to_terms" required />
            <label class="form-check-label pointer">
                By submitting this order, buyer has read, understands, and agrees to Wilbur Hill LLC's <a target="_blank" 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="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>

<script type="text/javascript">
    var formComponent = new Vue({
        el: '#formComponent',
        data: {
            quantity: null
        },
        method: {

        }
    })
</script>
