{% include 'components/frontHead.html' %}
<meta name="lastPhone" content="">
<div class="container">
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-fw fa-home"></i> {{ breadcrumb.storeType }}</a></li>
        <li><a href="#">{{ breadcrumb.storeCity }}</a></li>
        <li class="active">Completed Buys</li>
    </ol>

    <div class="row">
        <div class="card">
            <!-- Default panel contents -->
            <div class="card-header" style="height: 50px;">
                Add Loyalty Data
                <div class="float-end">
                    <button class="btn btn-sm btn-info" id="lastPhoneButton" style="margin-right: 8px;">Last Customer</button>
                </div>
            </div>
            <div class="card-body">
                <form id="lookupPhone" data-parsley-validate="">
                    <div id="addLoyaltyData">
                        <h2>Lookup by Phone Number</h2>

                        <div class="lookupPhoneNumber">
                            <div class="input-group input-group-lg">
                                <span class="input-group-addon" id="basic-addon1"><i class="fa fa-phone"></i></span>
                                <input type="text" class="form-control form-" id="lookupPhoneInput" required=""
                                       data-parsley-pattern="^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$"
                                       data-parsley-errors-container="#errors">
                            </div>
                            <div class="invalid-form-error-message" id="errors"></div>
                            <div id="statusMessages"></div>
                        </div>
                        <div class="lookupPhoneButton">
                            <div class="input-group pull-right">
                                <br/>
                                <input type="submit" class="btn btn-lg btn-primary" id="lookupPhoneButton">
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="card">
            <div class="card-header">Coupon Lookup</div>
            <div class="card-body">
                <div id="couponLookupContainer">
                    <h2>Coupon Code</h2>
                    <div class="couponCodeLookup">
                        <div class="input-group input-group-lg">
                            <span class="input-group-addon"><i class="fa fa-phone"></i></span>
                            <input type="text" class="form-control form-" id="lookupCouponInput" placeholder="____ ____" style="text-transform:uppercase">
                        </div>
                        <div class="invalid-form-error-message" id="couponErrors"></div>
                        <div id="couponStatusMessages"></div>
                    </div>
                    <div class="lookupCodeButton">
                        <div class="input-group float-end">
                            <br/>
                            <button class="btn btn-lg btn-primary" id="lookupCodeButton">Submit</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" id="couponModal">

</div>
{% include 'loyalty/front/includes.html' %}
<script type="text/javascript">
    {% include 'loyalty/front/scripts.js' %}
</script>