{% extends 'layout.server.view.html' %} {% block cssFile %}
<link href="/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="/css/font.css" rel="stylesheet">
<link rel="stylesheet" href="/css/mstepper.min.css">
<link rel="stylesheet" href="/css/register.min.css">
<style>
    form#registerTrial .form-group {
        margin-bottom: 20px;
    }
</style>
{% endblock %} {% block content %}
<div class="register-head">
    <div class="container">
        <h1>Bắt đầu trải nghiệm hệ thống</h1>
        <p>Chào mừng bạn đến với Giải pháp Phần mềm hóa đơn điện tử AHOADON.COM</p>
    </div>
</div>
</div>
<div class="container">
    {% if check == undefined %}
    <!-- Form đăng ký dùng thử -->
    <div class="row margin-bottom-40">
        <form class="form-horizontal" role="form" name="registerTrial" id="registerTrial" autocomplete="off">
            <ul class="stepper linear demos trial">
                <li class="step active trial">
                    <div class="step-title waves-effect waves-dark trial">
                        Thông tin đăng ký dùng thử
                    </div>
                    <div class="step-content trial">
                        <div class="row">
                            <!-- Mã Số Thuế -->
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label" for="taxCode">Mã số thuế <span
                                            style="color:red">*</span></label>
                                    <div class="col-md-9">
                                        <input class="form-control" id="taxCode" name="taxCode" type="text" class=""
                                            autofocus>
                                        <span class="text-danger" id="invalidTaxCode"
                                            style="display:none;font-size:12px;position: absolute;padding-top: 3px;">Mã
                                            số thuế
                                            không hợp
                                            lệ.</span>
                                        <span class="text-danger" id="existsTaxCode"
                                            style="display:none;font-size:12px;position: absolute;padding-top: 3px;">Mã
                                            số thuế đã
                                            tồn tại!</span>
                                    </div>
                                </div>
                                <!-- Tên công ty -->
                                <div class="form-group">
                                    <label class="col-sm-3 control-label" for="company">Tên công ty <span
                                            style="color:red">*</span></label>
                                    <div class="col-md-9">
                                        <input class="form-control" id="company" name="company" type="text" class="">
                                    </div>
                                </div>
                                <!-- Địa chỉ -->
                                <div class="form-group">
                                    <label class="col-sm-3 control-label" for="address">Địa chỉ <span
                                            style="color:red">*</span></label>
                                    <div class="col-md-9">
                                        <input class="form-control" id="address" name="address" type="text" class="">
                                    </div>
                                </div>
                                <!-- Tỉnh thành phố -->
                                <div class="form-group">
                                    <label class="col-sm-3 control-label" for="city">Tỉnh/Thành <span
                                            style="color:red">*</span></label>
                                    <div class="col-md-9">
                                        <select class="form-control" name="city" id="city">
                                            <option value="">Chọn Tỉnh/Thành</option>
                                            {% for p in provinces %}
                                            <option value="{{p.ten_tinh}}">{{p.ten_tinh}}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <!-- Người liên hệ -->
                                <div class="form-group">
                                    <label class="col-sm-3 control-label" for="contact">Người liên hệ <span
                                            style="color:red">*</span></label>
                                    <div class="col-md-9">
                                        <input class="form-control" id="contact" name="contact" type="text" class="">
                                    </div>
                                </div>
                                <!-- ho ten -->
                                <div class="form-group">
                                    <label class="col-sm-3 control-label" for="name">Chức vụ </label>
                                    <div class="col-md-9">
                                        <input class="form-control" id="name" name="name" type="text" class="">
                                    </div>
                                </div>
                                <!-- Số điện thoại -->
                                <div class="form-group">
                                    <label for="mobile" class="col-sm-3 control-label" for="mobile">Số điện thoại <span
                                            style="color:red">*</span></label>
                                    <div class="col-md-9">
                                        <input class="form-control" type="text" name="mobile" name="mobile" id="mobile">
                                        <span class="text-danger" id="invalidMobile"
                                            style="display:none;font-size:12px;position: absolute;padding-top: 3px;">Số
                                            điện thoại
                                            không
                                            hợp
                                            lệ.</span>
                                    </div>
                                </div>
                                <!-- Email -->
                                <div class="form-group">
                                    <label for="email" class="col-sm-3 control-label">Email <span
                                            class="text-danger">*</span></label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" id="email" name="email" id="email"
                                            value="{{email}}">
                                        <span class="text-danger" id="invalidEmail"
                                            style="display:none;font-size:12px;position: absolute;padding-top: 3px;">Địa
                                            chỉ Email
                                            không hợp lệ</span>
                                        <span class="text-danger" id="existsEmail"
                                            style="display:none;font-size:12px;position: absolute;padding-top: 3px;">Địa
                                            chỉ Email
                                            đã được sử dụng trên hệ thống</span>
                                    </div>
                                </div>
                            </div>
                            <!-- ho ten -->
                            <div class="col-md-6">
                                <!-- Xác thực đăng ký -->
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">Xác thực đăng ký <span
                                            class="text-danger">*</span></label>
                                    <div class="col-sm-9">
                                        <div class="g-recaptcha"
                                            data-sitekey="6LfP1MIUAAAAAI9XavEqSKoELnM1Urv2cSKTzOOE">
                                        </div>
                                        <span class="text-danger" id="register_error" style="display:none;"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="step-actions trial">
                                    <button type="submit" id="registerTrial" class="btn blue">Đăng ký</button>
                                </div>
                            </div>
                        </div>

                    </div>
                </li>
            </ul>
        </form>
    </div>
</div>

{% else %}

<!-- Form đăng ký -->
<div class="row margin-bottom-40">
    <form class="form-horizontal" role="form" name="formRegister" id="formRegister" autocomplete="off">
        <ul class="stepper linear demos">
            <!-- thông tin đơn vị -->
            <li class="step active">
                <div data-step-label="" class="step-title waves-effect waves-dark">
                    <!-- đăng ký  -->
                    <div class="col-md-6" style="padding-left: 25px;">
                        Thông tin đơn vị
                    </div>
                    <div class="col-md-6">
                    </div>
                </div>
                <div class="step-content">
                    <div class="row">
                        <!-- forrm đăng ký -->
                        <div class="col-md-6">
                            <!-- mã số thuế -->
                            <div class="form-group">
                                <label class="col-sm-3 control-label" for="taxCode">Mã số thuế <span
                                        style="color:red">*</span></label>
                                <div class="col-sm-9">
                                    <input class="form-control " id="taxCode" name="taxCode" price="{{pack_price}}"
                                        price_init="{{pack_price_init}}" sl="{{pack_sl}}" required
                                        pack_name="{{pack_name}}" type="text" autofocus>
                                    <span class="text-danger" id="invalidTaxCode" style="display:none;">Mã số thuế
                                        không hợp
                                        lệ.</span>
                                    <span class="text-danger" id="existsTaxCode" style="display:none;">Mã số thuế đã
                                        tồn tại!</span>
                                </div>
                            </div>
                            <!-- Tên đơn vị -->
                            <div class="form-group">
                                <label class="col-sm-3 control-label" for="dk_unit">Tên đơn vị <span
                                        style="color:red">*</span></label>
                                <div class="col-sm-9">
                                    <input class="form-control required" id="dk_unit" name="dk_unit" type="text"
                                        required>
                                </div>
                            </div>
                            <!-- địa chỉ -->
                            <div class="form-group">
                                <label class="col-sm-3 control-label" for="address">Địa chỉ <span
                                        style="color:red">*</span></label>
                                <div class="col-sm-9">
                                    <input class="form-control" id="address" name="address" type="text" required>
                                </div>
                            </div>

                            <!-- Tỉnh thành phố -->
                            <div class="form-group">
                                <label for="city" class="col-sm-3 control-label">Tỉnh/Thành <span
                                        style="color:red">*</span></label>
                                <div class="col-sm-9">
                                    <select class="form-control" name="city" id="city" required>
                                        <option value="">Chọn Tỉnh/Thành</option>
                                        {% for p in provinces %}
                                        <option value="{{p.ten_tinh}}">{{p.ten_tinh}}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>

                        </div>
                        <div class="col-md-6">
                            <!-- Người liên hệ -->
                            <div class="form-group">
                                <label class="col-sm-3 control-label" for="dk_name">Người liên hệ <span
                                        style="color:red">*</span></label>
                                <div class="col-sm-9">
                                    <input class="form-control" id="dk_name" name="dk_name" type="text" required>
                                </div>
                            </div>

                            <!-- Số điện thoại -->
                            <div class="form-group">
                                <label for="dk_mobile" class="col-sm-3 control-label">Điện thoại <span
                                        style="color:red">*</span></label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" name="dk_mobile" id="dk_mobile" required>
                                    <span class="text-danger" id="invalidMobile" style="display:none;">Số điện thoại
                                        không hợp
                                        lệ.</span>
                                </div>
                            </div>
                            <!-- Email -->
                            <div class="form-group">
                                <label for="dk_email" class="col-sm-3 control-label">Email <span
                                        style="color:red">*</span></label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" name="dk_email" id="dk_email"
                                        value="{{email}}" required>
                                    <span class="text-danger" id="invalidDKEmail" style="display:none;">Địa chỉ Email
                                        không hợp
                                        lệ.</span>
                                    <span class="text-danger" id="existsEmail" style="display:none;">Địa chỉ Email
                                        đã được sử
                                        dụng trên hệ thống.</span>
                                </div>
                            </div>
                            <!-- mã đại lý -->
                            <div class="form-group">
                                <label class="col-sm-3 control-label" for="code">Mã đại lý</label>
                                <div class="col-sm-9">
                                    {% if isDaily %}
                                    <input class="form-control" id="code" name="code" type="text" disabled="disabled"
                                        value="{{ma_daily}}">
                                    {% else %}
                                    <input class="form-control" id="code" name="code" type="text" value="{{ma_daily}}">
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="step-actions">
                                <button id="continue-step-1" class="waves-effect waves-dark btn blue btn-common"
                                    type="button">Tiếp
                                    tục</button>
                                <button id="continue-step-1-finish" class="waves-effect waves-dark btn blue next-step"
                                    type="button" style="display: none;">Tiếp
                                    tục</button>
                            </div>
                        </div>
                    </div>
                </div>

            </li>
            <li class="step">
                <div class="step-title waves-effect waves-dark">
                    <div class="col-md-6" style="padding-left:25px">
                        Thông tin xuất hóa đơn
                    </div>
                </div>
                <div class="step-content">
                    <div class="row">
                        <div class="col-md-6">
                            <!-- tên đơn vị xuất hóa đơn-->
                            <div class="form-group">
                                <label class="col-sm-3 control-label" for="xhd_unit">Tên đơn vị <span
                                        style="color:red">*</span></label>
                                <div class="col-sm-9">
                                    <input class="form-control" id="xhd_unit" name="xhd_unit" type="text" required>
                                </div>
                            </div>
                            <!-- địa chỉ xuất hóa dơn -->
                            <div class="form-group">
                                <label class="col-sm-3 control-label" for="xhd_address">Địa chỉ <span
                                        style="color:red">*</span></label>
                                <div class="col-sm-9">
                                    <input class="form-control" id="xhd_address" name="xhd_address" type="text"
                                        required>
                                </div>
                            </div>
                            <!-- Email -->
                            <div class="form-group">
                                <label for="xhd_email" class="col-sm-3 control-label">Email </label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" name="xhd_email" id="xhd_email"
                                        value="{{email}}">
                                    <span class="text-danger" id="invalidEmail" style="display:none;">Địa chỉ Email
                                        không hợp
                                        lệ.</span>
                                    <span class="text-danger" id="existsEmail" style="display:none;">Địa chỉ Email
                                        đã được sử
                                        dụng trên hệ thống.</span>
                                </div>
                            </div>
                            <!-- Chức danh -->
                            <div class="form-group">
                                <label class="col-sm-3 control-label" for="title">Chức danh</label>
                                <div class="col-sm-9">
                                    <input class="form-control" id="title" name="title" type="text">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <!-- mã số thuế xuất hóa đơn -->
                            <div class="form-group">
                                <label class="col-sm-3 control-label" for="xhd_taxCode">Mã số thuế <span
                                        style="color:red">*</span></label>
                                <div class="col-sm-9">
                                    <input class="form-control" id="xhd_taxCode" name="xhd_taxCode" type="text"
                                        required>
                                    <span class="text-danger" id="invalidTaxCode" style="display:none;">Mã số thuế
                                        không hợp
                                        lệ.</span>
                                </div>
                            </div>
                            <!-- họ tên -->
                            <div class="form-group">
                                <label class="col-sm-3 control-label" for="name">Họ tên</label>
                                <div class="col-sm-9">
                                    <input class="form-control" id="name" name="name" type="text">
                                </div>
                            </div>
                            <!-- Số điện thoại -->
                            <div class="form-group">
                                <label for="xhd_mobile" class="col-sm-3 control-label">Điện thoại</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" name="xhd_mobile" id="xhd_mobile">
                                    <span class="text-danger" id="invalidMobile" style="display:none;">Số điện thoại
                                        không hợp
                                        lệ.</span>
                                </div>
                            </div>
                        </div>
                        <!-- Loại thanh toán-->
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="col-sm-3 control-label" for="payment">Hình thức thanh toán</label>
                                <div class="col-md-9">
                                    <div class="col-md-6">
                                        <input type="radio" id="choise1" name="payment" value="after">
                                        <label for="choise1">Để sau</label>
                                    </div>
                                    <div class="col-md-6">
                                        <input type="radio" id="choise2" name="payment" checked="check" value="now">
                                        <label for="choise2">Thanh toán ngay</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Xác thực đăng ký -->
                        <div class="col-md-6 ">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">Xác thực đăng ký<span
                                        class="text-danger">*</span></label>
                                <div class="col-sm-9">
                                    <div class="g-recaptcha" data-sitekey="6LfP1MIUAAAAAI9XavEqSKoELnM1Urv2cSKTzOOE">
                                    </div>
                                    <span class="text-danger" id="register_error" style="display:none;"></span>
                                </div>
                            </div>
                        </div>
                        <!-- điều khoản -->
                        <div class="col-md-6">
                            <div class="input-field col s12">
                                <input type="checkbox" id="term"> Tôi đồng ý với <a href="/dieu-khoan"
                                    target="_blank">điều
                                    khoản sử dụng</a> dịch vụ của Hóa Đơn Việt</label>
                                <p class="text-danger" id="term_error" style="display:none;">Bạn chưa đồng ý với
                                    điều
                                    khoản sử dụng.</p>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="step-actions">
                                <button id="continue-step-2" class="waves-effect waves-dark btn blue btn-common"
                                    type="button">Tiếp
                                    tục</button>
                                <button id="continue-step-2-finish"
                                    class="waves-effect waves-dark btn blue next-step btn-common" style="display:none;"
                                    type="button">Tiếp
                                    tục</button>
                                <button class="waves-effect waves-dark btn blue btn-common" type="submit"
                                    id="formRegisterButton" style="display: none;">Đăng
                                    ký</button>
                                <button class="btn previous-step">Quay lại</button>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li class="step" id="step-confirm">
                <div class="step-title waves-effect waves-dark">
                    <div class="col-md-6" style="padding-left: 25px;">
                        Xác nhận thanh toán
                    </div>
                    <div class="col-md-6">

                    </div>
                </div>
                <div class="step-content">
                    <div class="row">
                        <!-- Thông tin gói hóa đơn -->
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="col-sm-4 control-label" for="payment_packname">Gói hóa đơn:</label>
                                <div class="col-sm-8">
                                    <input class="form-control" id="payment_packname" name="payment_packname"
                                        type="text" disabled="disabled">
                                </div>
                            </div>
                        </div>
                        <!-- Giá tiền -->
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="col-sm-4 control-label" for="payment_packprice">Giá gói:</label>
                                <div class="col-sm-8">
                                    <input class="form-control" id="payment_packprice" name="payment_packprice"
                                        type="text" disabled="disabled">
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="row">
                        <!-- Số lượng hóa đơn -->
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="col-sm-4 control-label" for="payment_sl">Số lượng hóa đơn:</label>
                                <div class="col-sm-8">
                                    <input class="form-control" id="payment_sl" name="payment_sl" type="text"
                                        disabled="disabled">
                                </div>
                            </div>
                        </div>
                        <!-- Phí khởi tạo -->
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="col-sm-4 control-label" for="payment_price_init">Phí khởi tạo:</label>
                                <div class="col-sm-8">
                                    <input class="form-control" id="payment_price_init" name="payment_price_init"
                                        type="text" disabled="disabled">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <!-- mã giảm giá -->
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="col-sm-4 control-label" for="sale">Mã giảm giá</label>
                                <div class="col-sm-8">
                                    <input class="form-control" id="sale" name="sale" type="text">
                                </div>
                            </div>
                        </div>
                        <!-- Tổng tiền -->
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="col-sm-4 control-label" for="payment_total_price">Tổng tiền:</label>
                                <div class="col-sm-8">
                                    <input class="form-control" id="payment_total_price" name="payment_total_price"
                                        type="text" disabled="disabled">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="col-sm-4 control-label" for="payment">Phương thức thanh toán</label>
                                <div class="col-md-8 cc-selector">
                                    <input checked="check" id="choise3" type="radio" name="ptthanhtoan" value="momo" />
                                    <label class="drinkcard-cc momo" for="choise3"></label>
                                    <input id="choise4" type="radio" name="ptthanhtoan" value="vnpay" />
                                    <label class="drinkcard-cc vnpay" for="choise4"></label>
                                </div>
                            </div>
                        </div>
                        <!-- Tổng tiền -->
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="col-sm-4 control-label" for="payment_total_price">Tổng tiền sau giảm giá:</label>
                                <div class="col-sm-8">
                                    <input class="form-control" id="payment_total_price_after_discount" price="" name="payment_total_price_after_discount"
                                        type="text" disabled="disabled">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="step-actions">
                        <button class="waves-effect waves-dark btn blue" type="button" id="btnVNPAY">Thanh
                            toán hóa đơn</button>
                        <button class="btn previous-step">Quay lại</button>
                    </div>
                </div>
            </li>
        </ul>
    </form>
</div>
</div>

{% endif %}

</div>
<div class="section-resources">
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <img src="/img/start-use.png" alt="" style="max-width:100%">
            </div>
            <div class="col-md-6 text-center">
                <h2 class="resources-title">Bạn chưa sẵn sàng để bắt đầu sử dụng?</h2>
                <p class="resources-content">Chúng tôi ở đây để giúp bạn ở mọi giai đoạn của cuộc hành trình của bạn</p>
                <div class="research">
                    <a href="/ho-tro">
                        <button class="btn btn-main research" type="button">Tìm hiểu</button>
                    </a>
                </div>
            </div>
            <div class="col-md-3">

            </div>
        </div>

    </div>
</div>
<div class="waiting">
    <span style="position: fixed; left:38%;top:43%;font-size:18px">Vui lòng chờ trong giây lát. Hệ thống đang được khởi
        tạo!</span>
</div>


{% endblock %} {% block jsFile %}
<script src='https://www.google.com/recaptcha/api.js?hl=vi'></script>
<link rel='stylesheet' href='https://pay.vnpay.vn/lib/vnpay/vnpay.css' />
<script src='https://pay.vnpay.vn/lib/vnpay/vnpay.js'></script>
<script type="text/javascript" src="/assets/frontend/layout/scripts/validate.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> -->
<script src="/js/mstepper.js"></script>
<script>
    var domSteppers = document.querySelectorAll('.stepper.demos');
    for (var i = 0, len = domSteppers.length; i < len; i++) {
        var domStepper = domSteppers[i];
        new MStepper(domStepper);
    }
    function someFunction(destroyFeedback) {
        setTimeout(function() {
            destroyFeedback(true);
        }, 1000);
    }
</script>
<script>
    $(document).ready(() => {
        var phuong_thuc_thanh_toan = 'momo';
        $('input[type=radio][name=ptthanhtoan]').change(function() {
            phuong_thuc_thanh_toan = this.value;
        });

        $("#btnVNPAY").click(function() {
            let mst = $('#taxCode').val();
            let amount = 0;
            let payment_total_price_after_discount = $('#payment_total_price_after_discount').attr("price");
            if (payment_total_price_after_discount) {
                amount = parseInt(payment_total_price_after_discount);
            }
            var requestData = {
                mst: mst,
                amount: amount
            }
            if (phuong_thuc_thanh_toan === 'vnpay') {
                $.ajax({
                    type: "POST",
                    url: '/create-payment-url',
                    data: requestData,
                    dataType: 'JSON',
                    success: function(x) {
                        if (x.code === '00') {
                            if (window.vnpay) {
                                vnpay.open({width: 768, height: 600, url: x.data});
                            }
                            else {
                                location.href = x.data;
                            }
                            return false;

                        } else {
                            alert(x.Message);
                        }
                    }
                });
            } else {
                $.ajax({
                    type: "POST",
                    url: '/create-momo-payment-url',
                    data: requestData,
                    dataType: 'JSON',
                    success: function(x) {
                        window.location.replace(x);
                    },
                    error: function(y) {
                    }
                });
            }

            return false;
        });
    });
</script>
{% endblock %}