@{

}

<div class="top-navigation">
    <div id="wrapper">
        <div class="gray-bg">
            <div class="wrapper wrapper-content">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5>@Resources.LangLog.TextOpLog</h5>

                                <div class="ibox-tools">
                                    <a class="collapse-link">
                                        <i class="fa fa-chevron-up"></i>
                                    </a>
                                    <a class="close-link">
                                        <i class="fa fa-times"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="ibox-content">
                                <form class="form-horizontal clearfix" id="formCond">
                                    <div class="form-group col-md-4">
                                        <label class="col-lg-3 col-md-3 col-sm-2 control-label">@Resources.LangLog.LabelDateRange</label>
                                        <div class="col-lg-4 col-md-4 col-sm-5">
                                            <input type="text" class="form-control" name="DATE_START" id="DATE_START" />
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-sm-5">
                                            <input type="text" class="form-control" name="DATE_END" id="DATE_END" />
                                        </div>
                                    </div>
                                    <div class="form-group col-md-4">
                                        <label class="col-lg-3 col-md-3 col-sm-2 control-label">@Resources.LangAll.LabelMBLNO</label>
                                        <div class="col-lg-8 col-md-9 col-sm-10">
                                            <input type="text" class="form-control" name="MBLNO" />
                                        </div>
                                    </div>
                                    <div class="form-group col-md-2">
                                        <a id="btn-reset" href="javascript:;" class="btn btn-default btn-sm">@Resources.LangAll.BtnReset</a>
                                        <a href="javascript:;" class="btn btn-primary btn-sm" id="btnSearch">@Resources.LangAll.BtnQuery</a>
                                    </div>
                                </form>
                                <table id="table"
                                       data-toggle="table"
                                       data-show-refresh="false"
                                       data-show-toggle="false"
                                       data-show-columns="false"
                                       data-url="@Url.Action("LogData")"
                                       data-content-type="application/x-www-form-urlencoded"
                                       data-pagination="true"
                                       data-side-pagination="server"
                                       data-total-field="Total"
                                       data-data-field="DataList"
                                       data-page-number="1"
                                       data-page-size="15"
                                       data-query-params="queryParams"
                                       data-method="post">
                                    <thead>
                                        <tr>
                                            <th data-field="OpTime">@Resources.LangLog.LabelOpTime</th>
                                            <th data-field="OpUserName">@Resources.LangLog.LabelOpUserName</th>
                                            <th data-field="OpCompanyName">@Resources.LangLog.LabelOpCompanyName</th>
                                            <th data-field="Module">@Resources.LangLog.LabelModule</th>
                                            <th data-field="Type">@Resources.LangLog.LabelType</th>
                                            <th data-field="MBLNO">@Resources.LangAll.LabelMBLNO</th>
                                            <th data-field="LogId" data-formatter="operateFormatter">@Resources.LangAll.LabelOPERATE</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="changeModal" tabindex="-1" role="dialog" aria-labelledby="changeModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="changeModalLabel">@Resources.LangLog.BtnViewChange</h4>
            </div>
            <div class="modal-body cleafix">
                <table id="tableChange"
                       data-toggle="table"
                       data-show-refresh="false"
                       data-show-toggle="false"
                       data-show-columns="false"
                       data-content-type="application/x-www-form-urlencoded"
                       data-pagination="false"
                       data-method="post">
                    <thead>
                        <tr>
                            <th data-field="Title">@Resources.LangLog.LabelField</th>
                            <th data-field="SrcValue">@Resources.LangLog.LabelSrcValue</th>
                            <th data-field="DestValue">@Resources.LangLog.LabelDestValue</th>
                        </tr>
                    </thead>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">@Resources.LangAll.BtnClose</button>
            </div>
        </div>
    </div>
</div>


@section styles
{
    <link type="text/css" rel="stylesheet" href="~/Content/css/logview.css" />
}
@section scripts{
    <script>
        $(function () {
            $("#btn-reset").click(function () {
                $(".form-horizontal input").val('');
            });

            $('#table').bootstrapTable();
            $('#tableChange').bootstrapTable();

            $("#btnSearch").click(function () {
                $('#table').bootstrapTable('refresh')
            })

            $('#DATE_START,#DATE_END').datepicker({
                autoclose: true,
                format: "yyyy-mm-dd"
            });
        })

        function queryParams(params) {
            var cond = $("#formCond").serializeObject();
            params.DATE_START = cond.DATE_START;
            params.DATE_END = cond.DATE_END;
            params.MBLNO = cond.MBLNO;

            return params
        }

        function operateFormatter(value, row, index) {
            return [
                '<a class="viewChg" onclick="viewChange(' + row.LogId + ')">',
                '<i class="fa fa-eye"></i>@Resources.LangLog.BtnViewChange',
                '</a>'
            ].join('');
        }

        function viewChange(logid) {
        var idx=layer.load();
            var url = '@Url.Action("ChangeData")?logId=' + logid;
            $.ajax({
                method: 'POST',
                url: url,
                dataType: 'json',
                success: function (data) {
                    layer.close(idx)
                    if (data.Success) {
                        if (data.ChangeList.length > 0) {
                            $("#changeModal").modal('show')
                            $('#tableChange').bootstrapTable('load', data.ChangeList);
                        } else {
                            layer.alert('@Resources.LangLog.MsgNoPropChange');
                        }
                    } else {
                        layer.alert(data.Message);
                    }
                }
            })
        }
    </script>
}