<%@ include file="/common/taglibs.jsp" %>
<%@ page language="java" pageEncoding="UTF-8" %>

<!-- BEGIN PAGE HEADER-->
<h3 class="page-title">
  <fmt:message key="workOrder.update.title"/>
  <small><fmt:message key="workOrder.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="workOrder.update.subtitle"/>
        </div>
        <div class="actions">
          <a href="workOrderSearch.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="workOrder" class="form-horizontal form-bordered" id="workOrder"
                   action="workOrderUpdate.html">
          <form:hidden id="workorderId" path="id"/>
          <input type="hidden" id="operation" name="operation"/>
          <input type="hidden" id="bomId" name="bom.id" value="${workOrder.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="workOrder.name"/></label>

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

              <label class="control-label col-md-2"><fmt:message key="workOrder.bom"></fmt:message> </label>

              <div class="col-md-4">
                <div style="text-align:left">
                  <input type="text" id="bomName" name="bomName" class="form-control" value="${workOrder.bom.name}"/>
                  <form:errors path="bom.name" cssStyle="color: red"/>
                </div>
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-md-2"><fmt:message key="workOrder.amount"/> </label>

              <div class="col-md-4">
                <div style="text-align:left">
                  <form:input type="text" id="amount" path="amount" class="form-control"/>
                </div>
              </div>

              <label class="control-label col-md-2"><fmt:message key="workOrder.area"/> </label>

              <div class="col-md-4">
                <form:select path="areaId" class="form-control">
                  <form:option value=""><fmt:message key="option.none"/></form:option>
                  <c:forEach items="${areaList}" var="area">
                    <form:option value="${area.id}">${area.name}</form:option>
                  </c:forEach>
                </form:select>
                <form:errors path="areaId" cssStyle="color: red"/>
              </div>
            </div>

          </div>
          <div class="form-actions">
            <div class="row">
              <div class="col-md-offset-3 col-md-9">
                <button class="btn green" type="button" onclick="saveWorkOrder()"><i class="fa fa-save"></i><fmt:message
                        key="button.save"/></button>
                <c:if test="${not empty workOrder.id}">

                  <button class="btn red" type="button" onclick="deleteWorkOrder()"><i class="fa fa-trash-o"></i><fmt:message
                          key="button.delete"/></button>

                  <button class="btn yellow" type="button" onclick="checkout()"><i class="fa fa-sign-out"></i><fmt:message
                          key="button.checkout"/></button>
                </c:if>
                <button class="btn default" type="button" onclick="window.location=''"><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>
<!--End of update-->
<form method="post" action="${ctx}/service/store/workOrderCheckout" onsubmit="" id="workOrderCheckoutForm">
  <input type="hidden" name="wid" value="${workOrder.id}"/>
</form>

<c:if test="${not empty workOrder.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="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="component.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"></th>
              </tr>
              </thead>
              <tbody>
              <c:if test="${not empty componentList}">
                <c:forEach var="component" items="${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 yellow" onclick="workOrderCheckout(${component.id})"><i class="fa fa-sign-out"></i><fmt:message key="button.checkout"/></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>
    $(function () {
      $("#bomName").autocomplete({

        source: function (request, response) {
          $.ajax({
            url: "${ctx}/component/fetchBom",
            dataType: "json",
            data: {
              name: 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 ) {
          $("#bomId").val(ui.item.id);
        }
      });
    });

    function saveWorkOrder() {
      $("#operation").val("save");
      $("#workOrder").submit();
    }

    function deleteWorkOrder() {
      $("#operation").val("delete");
      $("#workOrder").submit();
    }

    function checkout() {
      //$("#operation").val("fetch");
      //$("#workOrder").submit();
      $("#workOrderCheckoutForm").submit();
    }

    function workOrderCheckout(componentId) {
      $("#componentId").val(componentId);
      $("#workOrderCheckoutForm").submit();
      <%--var workOrderId = $("#workOrderId");--%>
      <%--var checkout = $.ajax({--%>
        <%--url: "${ctx}/service/store/workOrderCheckout",--%>
        <%--dataType: "json",--%>
        <%--data: {--%>
          <%--workOrderId: workOrderId,--%>
          <%--componentId: componentId--%>
        <%--},--%>
        <%--asyn:true,--%>
        <%--success: function (data) {--%>
        <%----%>
        <%--}--%>
      <%--});--%>
    }
  </script>
</c:set>