HelenaExpressApp/www/pages/noticeslip.html

<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->

<div class="page" data-name="noticeslip">

    <div class="navbar">
        <div class="navbar-bg"></div>
        <div class="navbar-inner">
            <div class="left">
                <a class="link back" href="#">
                    <i class="icon icon-back"></i>
                    <span class="if-not-md">Back</span>
                </a>
            </div>
            <div class="title">Pick Up and Redeliver</div>
        </div>
    </div>


    <div class="page-content">
        <div class="row justify-content-center">
            <div class="col-100 medium-90 xlarge-75 margin-horizontal">
                <div class="card margin">
                    <div class="card-content text-align-center">
                        <div class="block padding-top">
                            Missed a delivery? For a fee, we'll pick up your oversized package or signature-required item from the Helena Post Office and deliver it to your front door, even if nobody's home.
                            You just need to fill out this form, sign the back of the pink notice slip, and take a picture of it with this app. Information provided must match the information on the notice slip.
                            Your item will be delivered within one business day of submitting a request, excluding postal holidays. This service is not available for Restricted Delivery or Registered Mail.
                        </div>
                        <div class="list" id="noticeform">
                            <ul>
                                <li class="item-content item-input item-input-outline">
                                    <div class="item-inner">
                                        <div class="item-title item-floating-label">Recipient Name</div>
                                        <div class="item-input-wrap">
                                            <input type="text" id="name" placeholder="Jon Doe" />
                                            <span class="input-clear-button"></span>
                                        </div>
                                    </div>
                                </li>
                                <li class="item-content item-input item-input-outline">
                                    <div class="item-inner">
                                        <div class="item-title item-floating-label">Street Address</div>
                                        <div class="item-input-wrap">
                                            <input type="text" id="street" placeholder="1234 Example Rd, Apt 1A" />
                                            <span class="input-clear-button"></span>
                                        </div>
                                    </div>
                                </li>
                                <li class="item-content item-input item-input-outline">
                                    <div class="item-inner">
                                        <div class="item-title item-floating-label">ZIP Code</div>
                                        <div class="item-input-wrap">
                                            <input type="text" id="zip" placeholder="59602" inputmode="numeric" />
                                            <span class="input-clear-button"></span>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="block">
                            Press the buttons to take a photo of the front and back of your signed notice slip.

                            <div class="row" style="min-height: 100px;">
                                <div class="col-50">
                                    <div class="button button-outline margin" onclick="takeDocPhoto('front')"><i class="fas fa-camera"></i> Front</div>
                                    <img src="assets/images/3849_front.png" id="noticefrontimg" style="max-width: 100%; max-height: 50vh;" />
                                </div>
                                <div class="col-50">
                                    <div class="button button-outline margin" onclick="takeDocPhoto('back')"><i class="fas fa-camera"></i> Back</div>
                                    <img src="assets/images/3849_back.png" id="noticebackimg" style="max-width: 100%; max-height: 50vh;" />
                                </div>
                            </div>
                        </div>
                        <div class="block margin-vertical">
                            By signing below, you authorize a Helena Express agent to sign for and take possession of your item from the Helena Post Office and to deliver it to the address entered above.
                        </div>
                        <div class="signature-wrapper">
                            <img src="assets/images/signature-line.svg" />
                            <canvas id="signaturecanvas"></canvas>
                            <i class="fas fa-undo text-color-blue" id="signatureUndoBtn"></i>
                            <i class="fas fa-trash text-color-red" id="signatureClearBtn"></i>
                        </div>
                        <div class="list" id="noticesignform">
                            <ul>
                                <li class="item-content item-input item-input-outline">
                                    <div class="item-inner">
                                        <div class="item-title item-floating-label">Your Name</div>
                                        <div class="item-input-wrap">
                                            <input type="text" id="signature" />
                                            <span class="input-clear-button"></span>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="card-content-padding">
                            <div class="button" onclick="noticeSlipPayAndFinish()"><i class="far fa-arrow-right"></i> Finish</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="popup text-color-black" id="noticeslip-pay-popup">
        <div class="block text-align-center">
            <h2>Finish and pay</h2>
            <h3>Total: $<span id="noticeslip-pay-amount"></span></h3>
            <div id="noticeslip-stripe-elements">
                <i class="fas fa-spin fa-spinner"></i> Loading secure card form...
            </div>
            <div id="noticeslip-card-errors" style="text-color-red"></div>
            <div class="button" onclick="submitNoticeSlip()"><i class="far fa-arrow-right"></i> Pay and Submit</div>
            <p><a class="button popup-close" href="#">Cancel</a></p>
        </div>
    </div>

</div>