{% extends 'layout.server.view.html' %} {% block cssFile %} {% endblock %} {% block content %}
<style>
    .m-t-10 {
        margin-top: 10px;
    }

    .full-width {
        width: 100% !important;
    }
</style>
<form action="payment-form" method="post">
    <h3 class="col-md-8 offset-2 m-t-10"><b>1. Thông tin đơn hàng</b></h3>
    <div class="col-md-8 offset-2">
        <table class="table">
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">Sản phẩm</th>
                    <th scope="col">Số tiền</th>
                    <th scope="col">Đơn vị</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Dụng cụ giáo dục</td>
                    <td>
                        <input id="price" name="price" type="number" value="10000" required />
                    </td>
                    <td>vnd</td>
                </tr>
            </tbody>
        </table>
    </div>

    <h3 class="col-md-8 offset-2 m-t-10"><b>2. Thông tin khách hàng</b></h3>
    <div class="col-md-8 offset-2">
        <label class="col-form-label">Họ tên</label>
        <br>
        <input id="full_name" name="full_name" type="text" class="form-control" placeholder="Nhập tên" required />
    </div>
    <div class="col-md-8 offset-2">
        <label class="col-form-label">Email</label>
        <br>
        <input id="email" name="email" type="text" class="form-control" placeholder="Nhập..." required />
    </div>
    <div class="col-md-8 offset-2">
        <label class="col-form-label">Số điện thoại</label>
        <br>
        <input id="phone_number" name="phone-number" type="text" class="form-control" placeholder="Nhập..." required />
    </div>
    <div class="col-md-8 offset-2">
        <label class="col-form-label">Địa chỉ</label>
        <br>
        <textarea id="address" name="address" rows="3" type="text" class="form-control" placeholder="Nhập..."></textarea>
    </div>
    <div class="col-md-8 offset-2">
        <label class="col-form-label">Nội dung thanh toán</label>
        <br>
        <textarea id="trans_info" name="trans-info" rows="3" type="text" class="form-control" placeholder="Nhập..."></textarea>
    </div>
    <input type="hidden" name="inpage" value="0">
    <div class="col-md-8 offset-2 m-t-10 text-center">
        <button type="button" id="omi-btn-checkout" class="btn btn-primary" style="margin-bottom: 30px;">Thanh toán
            ngay</button>
    </div>
</form>

<!-- <div class="col-12" id="omipay-iframe"></div> -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!-- <script type="text/javascript" src="https://upload-sandbox.omipay.vn/public/js/inpage.checkout.js"></script> -->
<script>
    $(document).ready(() => {
        $("#omi-btn-checkout").click(() => {
            let price = $('#price').val();
            let full_name = $('#full_name').val();
            let phone_number = $('#phone_number').val();
            let address = $('#address').val();
            let trans_info = $('#trans_info').val();
            if (price == null || price == undefined) {
                alert("Bạn chưa nhập đơn giá");
                return;
            }

            if (full_name == null || full_name == undefined) {
                alert("Bạn chưa nhập Họ tên");
                return;
            }

            if (phone_number == null || phone_number == undefined) {
                alert("Bạn chưa nhập Số điện thoại");
                return;
            }

            var requestData = {
                price: price,
                customer_name: full_name,
                customer_email: email,
                customer_phone: phone_number,
                address: address,
                trans_info: trans_info
            };

            $.post("/pvcom/create-payment-url", requestData, function (x) {
                if (x.code === '00') {
                    window.location.href = x.data;
                    return false;

                } else {
                    alert(x.Message);
                }
            });
        })
    });
</script>
{% endblock %}
{% block jsFile %}

{% endblock %}