<%--
  Created by IntelliJ IDEA.
  User: kangmor
  Date: 2015/10/15
  Time: 13:45
--%>
<%@ include file="/common/taglibs.jsp" %>
<%@ page language="java" pageEncoding="UTF-8" %>

<!-- BEGIN PAGE HEADER-->
<h3 class="page-title">
    <fmt:message key="menu.component.bom"/>
    <small><fmt:message key="bom.update.subtitle"/></small>
</h3>

<!--Begin of update-->
<div class="row">
    <div class="col-md-12">
        <!-- BEGIN PORTLET-->
        <div class="portlet box green-jungle">
            <div class="portlet-title">
                <div class="caption">
                    <i class="fa fa-pencil"></i><fmt:message key="bom.update.subtitle"/>
                </div>

                <div class="actions">
                    <a href="bomSearch.html" class="btn btn-default btn-sm">
                        <i class="fa fa-reply"></i> <fmt:message key="button.return"/> </a>
                </div>
            </div>
            <div class="portlet-body form">
                <!-- BEGIN FORM-->
                <form:form commandName="bomUpdateForm" class="form-horizontal form-bordered" id="bomUpdateForm"
                           action="bomUpdate.html">
                    <form:hidden path="bom.id"/>
                    <form:hidden path="operation"/>
                    <form:hidden path="opId"/>
                    <form:hidden path="amount"/>
                    <input type="hidden" name="id" value="${bomUpdateForm.bom.id}"/>

                    <div class="form-body">
                        <%@include file="/common/success.jsp"%>
                        <%@include file="/common/error.jsp"%>

                        <div class="form-group">
                            <label class="control-label col-md-2"><fmt:message key="bom.name"/> </label>

                            <div class="col-md-2">
                                <div style="text-align:left" class="input-group">
                                    <form:input type="text" id="name" path="bom.name" class="form-control"/>
                                    <form:errors path="bom.name" cssStyle="color: red"/>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="form-actions">
                        <div class="row">
                            <div class="col-md-offset-3 col-md-9">
                                <button class="btn green" onclick="saveBom()"><i class="fa fa-save"></i><fmt:message key="button.save"/></button>

                                <c:if test="${not empty bomUpdateForm.bom.id}">
                                    <button class="btn red" onclick="deleteBom()"><i class="fa fa-trash-o"></i><fmt:message key="button.delete"/></button>
                                </c:if>
                                <button class="btn default" type="button" onclick="window.location.assign('')"><i class="fa fa-history"></i><fmt:message key="button.cancel"/></button>
                            </div>
                        </div>
                    </div>
                </form:form>
                <!-- END FORM-->
            </div>
        </div>
        <!-- END PORTLET-->
    </div>
</div>
<c:if test="${not empty bomUpdateForm.bom.id}">
    <div class="row">
        <div class="col-md-12">

            <!-- BEGIN EXAMPLE TABLE PORTLET-->
            <div class="portlet box blue">
                <div class="portlet-title">
                    <div class="caption">
                        <i class="fa fa-list-alt"></i><fmt:message key="component.list"/>
                    </div>
                </div>
                <div class="portlet-body">
                    <div class="row">
                        <div class="col-md-9 col-sm-12">
                            <div class="form-group">
                                <label class="control-label col-md-3"><fmt:message key="bom.update.components.add.name"/> </label>

                                <div class="col-md-2">
                                    <input id="tags" class="form-control">
                                </div>
                                <label class="control-label col-md-2"><fmt:message key="bom.update.components.add.amount"/> </label>

                                <div class="col-md-2">
                                    <input id="componentAmount" class="form-control">
                                </div>
                                <button onclick="addComponent()" class="btn green"><i class="fa fa-plus"></i><fmt:message key="button.add"/> </button>
                            </div>
                        </div>
                    </div>

                    <div class="table-scrollable">

                        <table id="bomUpdateForm.componentList"
                               class="table table-striped table-hover table-bordered dataTable no-footer" role="grid"
                               aria-describedby="sample_editable_1_info">
                            <thead>
                            <tr role="row">
                                <th tabindex="0" rowspan="1" colspan="1"><fmt:message key="bom.update.components.add.name"/></th>
                                <th tabindex="0" rowspan="1" colspan="1"><fmt:message key="component.partNumber"/></th>
                                <th tabindex="0" rowspan="1" colspan="1"><fmt:message key="component.amount"/></th>
                                <th tabindex="0" rowspan="1" colspan="1"><fmt:message key="table.edit"/></th>
                            </tr>
                            </thead>
                            <tbody>
                            <c:if test="${not empty bomUpdateForm.componentList}">
                                <c:forEach var="component" items="${bomUpdateForm.componentList}" varStatus="vStatus">
                                    <tr>
                                        <td>
                                            <c:out value="${component.name}"/>
                                        </td>
                                        <td>
                                            <c:out value="${component.partNumber}"/>
                                        </td>
                                        <td>
                                            <c:out value="${component.amount}"/>
                                        </td>
                                        <td>
                                            <button class="btn red" onclick="removeComponent(${component.id})"><i class="fa fa-trash-o"></i><fmt:message key="button.delete"/></button>
                                        </td>
                                    </tr>
                                </c:forEach>
                            </c:if>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!-- END EXAMPLE TABLE PORTLET-->
        </div>
    </div>
    <!--End of update-->
</c:if>

<c:set var="scripts" scope="request">
    <script language="JavaScript" type="text/javascript">
        $(function () {
            $("#tags").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "${ctx}/component/fetchComponent",
                        dataType: "json",
                        data: {
                            comp: request.term
                        },
                        success: function (data) {
                            response($.map(data, function (item) {
                                //alert($("#opId").val());
                                return {
                                    label: item.name,
                                    id: item.id
                                };
                            }));
                        }
                    });
                },
                minLength: 1,
                select: function( event, ui ) {
//                    log( ui.item ?
//                    "Selected: " + ui.item.label :
//                    "Nothing selected, input was " + this.value);
                    $("#opId").val(ui.item.id);
                }
//                open: function() {
//                    $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
//                },
//                close: function() {
//                    $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
//                }
            });
        });

        function addComponent() {
            var hasError = false;
            $("#operation").val("add");
            var a = $("#componentAmount").val();
            if ($("#opId").val().length <= 0) {
                hasError = true;
                alert("必须选择料件");
            }else if (a <= 0) {
                hasError = true;
                alert("料件数量必须大于0");
            }
            if (!hasError) {
                $("#amount").val(a);
                $("#bomUpdateForm").submit();
            }
        }

        function saveBom() {
            $("#operation").val("save");
            $("#bomUpdateForm").submit();
        }

        function removeComponent(componentId) {
            $("#opId").val(componentId);
            $("#operation").val("remove");
            $("#bomUpdateForm").submit();
        }

        function deleteBom() {
            $("#operation").val("delete");
            $("#bomUpdateForm").submit();
        }
    </script>
</c:set>