@extends('layout.app')

@section('page-title', $title)

@section('breadcrumb')
    <div class="tf-breadcrumb">
        <div class="container">
            <div class="tf-breadcrumb-wrap d-flex justify-content-between flex-wrap align-items-center">
                <div class="tf-breadcrumb-list">
                    <a href="{{ url('new-design/home.php') }}" class="text">Home</a>
                    <i class="icon icon-arrow-right"></i>
                    <a href="{{ url('new-design/review_order.php') }}" class="text">Review order</a>
                    <i class="icon icon-arrow-right"></i>
                    <span class="text">Online check payment</span>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('content')
    <div class="online-check-wrapper">
        <div class="container">
            <form id="online-check-form" class="pb-4" method="post">
                <input type="hidden" name="action_name" value="submit_check">
                <div class="tf-page-cart-item">
                    <div class="form-checkout">
                        <div class="grid-2">
                            <div>
                                <img src='{{ SECURE_WEB_PATH }}images/check.gif' class="w-100">
                            </div>
                            <div>
                                <fieldset class="box fieldset msg-wrapper">
                                    <label for="check_number" class="required">(Part #A) Check Number:</label>
                                    <input type="text"
                                           name="check_number"
                                           id="check_number"
                                           class="form-control"
                                    >
                                </fieldset>
                                <fieldset class="box fieldset msg-wrapper">
                                    <label for="branch_number" class="required">(Part #B) Branch Number:</label>
                                    <input type="text"
                                           name="branch_number"
                                           id="branch_number"
                                           class="form-control"
                                    >
                                </fieldset>
                                <fieldset class="box fieldset msg-wrapper">
                                    <label for="bank_name" class="required">(Part #C) Bank Name (exactly as it appears on check):</label>
                                    <input type="text"
                                           name="bank_name"
                                           id="bank_name"
                                           class="form-control"
                                    >
                                </fieldset>
                                <fieldset class="box fieldset msg-wrapper">
                                    <label for="bank_address" class="required">(Part #D) Bank Address - City, State, Zipcode</label>
                                    <textarea type="text"
                                           name="bank_address"
                                           id="bank_address"
                                           class="form-control"
                                    ></textarea>
                                </fieldset>
                                <fieldset class="box fieldset msg-wrapper">
                                    <label for="bank_transit_number" class="required">(Part #E) Bank Transit Number (must be a 9 digit number):
                                    </label>
                                    <input type="text"
                                           name="bank_transit_number"
                                           id="bank_transit_number"
                                           class="form-control"
                                    >
                                </fieldset>
                                <fieldset class="box fieldset msg-wrapper">
                                    <label for="account_number" class="required">(Part #F) Account Number:</label>
                                    <input type="text"
                                           name="account_number"
                                           id="account_number"
                                           class="form-control"
                                    >
                                </fieldset>
                                <fieldset class="box fieldset msg-wrapper">
                                    <label for="bank_phone" class="required">Bank Phone:</label>
                                    <input type="text"
                                           name="bank_phone"
                                           id="bank_phone"
                                           class="form-control"
                                    >
                                </fieldset>
                                <fieldset class="box fieldset msg-wrapper">
                                    <label for="account_name" class="required">Account Name:</label>
                                    <input type="text"
                                           name="account_name"
                                           id="account_name"
                                           class="form-control"
                                    >
                                </fieldset>
                                <fieldset class="box fieldset msg-wrapper">
                                    <label for="account_address" class="required">Account Address - City, State, Zipcode (exactly as it appears on check):</label>
                                    <textarea type="text"
                                              name="account_address"
                                              id="account_address"
                                              class="form-control"
                                    ></textarea>
                                </fieldset>
                                <fieldset class="box fieldset msg-wrapper">
                                    <div>
                                        <p>I understand that this is a check transaction, and by checking this box, I authorize Westminster Teak to draft a check in the amount of $0.00.</p>
                                        <p>I further understand that I will be charged a $20.00 service charge for a returned check.</p>
                                    </div>
                                    <div class="box-checkbox fieldset-radio mt-4">
                                        <input type="checkbox"
                                               name="agree"
                                               id="agree"
                                               class="tf-check"
                                               value="yes"
                                        >
                                        <label for="check-agree" class="text_black-2"><b>Yes, I agree.</b></label>
                                    </div>
                                </fieldset>
                                <fieldset class="box fieldset msg-wrapper">
                                    <p>Make sure you make a note of this transaction in your checkbook. Banks will not honor
                                        multiple checks with the same check number, so be sure to void the check you used for this transaction.</p>
                                </fieldset>
                                <fieldset class="box fieldset">
                                    <button id="check-button" type="submit"
                                       class="tf-btn btn-fill animate-hover-btn radius-3 w-100 justify-content-center text-uppercase"
                                    ><span>Submit order</span></button>
                                </fieldset>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('after-foot-js')
    <script type="text/javascript" src="{{ asset('new-design/js/online-check.js') }}"></script>
@endpush