@{

}

@section styles
{
    <link type="text/css" rel="stylesheet" href="~/Content/css/identification.css" />
    <link type="text/css" rel="stylesheet" href="~/Content/css/orderlist.css" />
}

<div class="wrapper wrapper-content animated fadeIn">
    <div class="col-lg-offset-3 col-lg-6">
        <div class="row">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5><i></i>船代查询</h5>
                </div>
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-lg-6">
                            <h3 style="text-align: center; color: blue;" id="hResult"></h3>
                            <h3 style="text-align: center; color: red;" id="hErr"></h3>
                        </div>
                    </div>
                    <div class="row">
                        <form class="form-horizontal m-t" id="qForm" action="@Url.Action("QueryData")" method="post">
                            <div class="form-group">
                                <label class="col-lg-2 col-md-2 col-sm-2 control-label">提单号</label>
                                <div class="col-lg-5 col-md-5 col-sm-5">
                                    <input name="mblno" type="text" class="form-control" required minlength="4"  />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-lg-2 col-md-2 col-sm-2 control-label">船名</label>
                                <div class="col-lg-5 col-md-5 col-sm-5">
                                    <input name="vessel" type="text" class="form-control" required  />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-lg-2 col-md-2 col-sm-2 control-label">航次</label>
                                <div class="col-lg-5 col-md-5 col-sm-5">
                                    <input name="voyno" type="text" class="form-control" required  />
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-lg-4 col-md-4 col-sm-4 col-sm-offset-3">
                                    <a class="btn btn-primary" id="btnQuery">查询</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section scripts
{
    <script src="~/Content/hplus/js/plugins/validate/jquery.validate.min.js"></script>
    <script src="~/Content/hplus/js/plugins/validate/messages_zh.min.js"></script>
    <script src="~/Content/js/jquery.form.js"></script>

    <script>
        $(function () {
            $("#qForm").validate()

            $("#btnQuery").click(function () {
                $("#hResult").text("")
                $("#hErr").text("")
                if ($("#qForm").valid()) {
                    $("#qForm").ajaxSubmit({
                        success: function (res) {
                            if (res.Success) {
                                var jobj = JSON.parse(res.Data)
                                $("#hResult").text("船代可能为：" + jobj.Forwarder + "，船公司可能为：" + jobj.Carrier)
                            } else {
                                $("#hErr").text(res.Message)
                            }
                        }
                    })
                }
            })
        })
    </script>
}