
<div class="card-header d-flex align-items-center" data-bs-toggle="collapse" data-bs-target="#widget_operationplanpanel" aria-expanded="false" aria-controls="widget_operationplanpanel">
  <h5 class="card-title text-capitalize me-auto">
  <span data-ng-if="operationplan.type" >{{ opptype[operationplan.type] }}</span>
  <span data-ng-if="!operationplan.id && !operationplan.reference && !operationplan.operationplan__reference">{{ 'no selection'|translate }}</span>
  <span data-ng-if="operationplan.id == -1">{{ 'selected' | translate }}&nbsp;{{ operationplan.count }}</span>
  </h5>
  <span class="fa fa-arrows align-middle w-auto widget-handle"></span>
</div>
<div class="card-body collapse show" id="widget_operationplanpanel" data-ng-show="operationplan.id || operationplan.reference || operationplan.operationplan__reference">
<style scoped>
input.ng-dirty {
  background: none !important;
}
</style>
<table style="table-layout:fixed" class="table table-sm table-hover table-borderless" id="opplan-attributes-drvtable">
  <body>
    <tr data-ng-if="operationplan.operation.name || operationplan.name">
      <td style="width: 120px">
        <b id="thead1" class="text-capitalize">{{ 'name'|translate }}&nbsp;</b>
      </td>
      <td>
        <b class="text-capitalize" data-ng-if="operationplan.hasOwnProperty('operation')">
          {{operationplan.operation.name}}
        <a href="/detail/input/operation/key/" role="input/operation" onclick="opendetail(event)">
           <span class="fa fa-caret-right"></span>
        </a>
        </b>
        <b class="text-capitalize" data-ng-if="!operationplan.hasOwnProperty('operation')">
          {{operationplan.name}}
        </b>
      </td>
    </tr>
    <tr data-ng-if="operationplan.id !== -1 && operationplan.type !== 'STCK'">
      <td><b class="text-capitalize">{{'reference'|translate}}</b></td>
      <td id="referencerow">{{operationplan.reference}}</td>
    </tr>
    <tr data-ng-if="operationplan.type == 'MO' && operationplan.owner">
      <td><b class="text-capitalize">{{'owner'|translate}}</b></td>
      <td id="ownerrow">{{operationplan.owner}}
        <a href="/detail/input/manufacturingorder/key/" role="input/manufacturingorder" onclick="opendetail(event)">
           <span class="fa fa-caret-right"></span>
        </a>
      </td>
    </tr>
    <tr data-ng-if="operationplan.item !== null && operationplan.id !== -1">
      <td><b class="text-capitalize" translate>item</b></td>
      <td id="itemrow">
        {{operationplan.item}}
        <a href="/detail/input/item/key/" role="input/item" onclick="opendetail(event)">
           <span class="fa fa-caret-right"></span>
        </a>
      </td>
    </tr>
    <tr data-ng-if="operationplan.item__description !== null && operationplan.id !== -1">
      <td></td>
      <td>
        <div style="max-width: 100%; white-space: nowrap; overflow:hidden"
          ng-attr-title="{{operationplan.item__description}}" onmouseenter="$(this).tooltip('show')">
        {{operationplan.item__description}}
        </div>
      </td>
    </tr>
    <tr ng-if="operationplan.type == 'PO'">
      <td><b class="text-capitalize">{{'supplier'|translate}}</b></td>
      <td id="supplierrow">{{operationplan.supplier}}
        <a href="/detail/input/supplier/key/" role="input/supplier" onclick="opendetail(event)">
           <span class="fa fa-caret-right"></span>
        </a>
      </td>
    </tr>
    <tr data-ng-if="operationplan.supplier__description !== null && operationplan.id !== -1">
      <td></td>
      <td style="max-width: calc(100% - 120px); white-space: nowrap; overflow:hidden">
        <div style="max-width: 100%; white-space: nowrap; overflow:hidden"
          ng-attr-title="{{operationplan.supplier__description}}" onmouseenter="$(this).tooltip('show')">
        {{operationplan.supplier__description}}
        </div>
      </td>
    </tr>
    <tr ng-if="operationplan.location !== null && operationplan.id !== -1">
      <td><b class="text-capitalize">{{'location'|translate}}</b></td>
      <td id="locationrow">{{operationplan.location}}
        <a href="/detail/input/location/key/" role="input/location" onclick="opendetail(event)">
           <span class="fa fa-caret-right"></span>
        </a>
      </td>
    </tr>
    <tr ng-if="operationplan.batch">
      <td><b class="text-capitalize">{{'batch'|translate}}</b></td>
      <td>{{operationplan.batch}}</td>
    </tr>
    <tr ng-if="operationplan.type == 'DO'">
      <td><b class="text-capitalize">{{'origin'|translate}}</b></td>
      <td id="originrow">{{operationplan.origin}}
        <a href="/detail/input/location/key/" role="input/location" onclick="opendetail(event)">
           <span class="fa fa-caret-right"></span>
        </a>
      </td>
    </tr>
    <tr ng-if="operationplan.type == 'DO'">
      <td>
      <b data-ng-if="operationplan.type !== 'STCK'" class="text-capitalize">{{'destination'|translate}}</b>
      <b data-ng-if="operationplan.type === 'STCK'" class="text-capitalize">{{'location'|translate}}</b>
      </td>
      <td id="destinationrow">{{operationplan.destination}}
        <a href="/detail/input/location/key/" role="input/location" onclick="opendetail(event)">
           <span class="fa fa-caret-right"></span>
        </a>
      </td>
    </tr>
    <tr data-ng-if="operationplan.type !== 'STCK'">
      <td><b class="text-capitalize" data-ng-if="operationplan.type == 'MO'">{{'start date'|translate}}</b>
        <b class="text-capitalize" data-ng-if="operationplan.type == 'PO'">{{'ordering date'|translate}}</b>
        <b class="text-capitalize" data-ng-if="operationplan.type == 'DO'">{{'shipping date'|translate}}</b>
        <b class="text-capitalize" data-ng-if="operationplan.colmodel.startdate">{{operationplan.colmodel.startdate.label|translate}}</b>
        <b class="text-capitalize" data-ng-if="operationplan.colmodel.operationplan__startdate">{{operationplan.colmodel.operationplan__startdate.label|translate}}</b>&nbsp;
        <small data-ng-if="operationplan.colmodel.startdate">({{ operationplan.colmodel.startdate.type|translate }})</small>
        <small data-ng-if="operationplan.colmodel.operationplan__startdate">({{ operationplan.colmodel.operationplan__startdate.type|translate }})</small>
      </td>
      <td>
        <input data-ng-if='operationplan.id === -1 && operationplan.start' class="form-control border-0 bg-white" type="datetime-local" ng-model="operationplan.start" readonly>
        <input data-ng-if='operationplan.id !== -1 && !operationplan.hasOwnProperty("operationplan__startdate")' class="form-control" type="datetime-local" ng-model="operationplan.start" ng-model-options="{debounce: 300}" data-ng-readonly="!editable">
        <input data-ng-if='operationplan.id !== -1 && operationplan.hasOwnProperty("operationplan__startdate")' class="form-control" type="datetime-local" ng-model="operationplan.operationplan__startdate" ng-model-options="{debounce: 300}" data-ng-readonly="!editable">
      </td>
    </tr>
    <tr data-ng-if="operationplan.setupend">
      <td><b class="text-capitalize">{{'setup end date'|translate}}</b></td>
      <td>{{(operationplan.setupend || operationplan.operationplan__setupend)|formatdatetime}}</td>
    </tr>
    <tr data-ng-if="operationplan.type !== 'STCK'">
      <td><b class="text-capitalize" ng-if="operationplan.type == 'MO'">{{'end date'|translate}}</b>
        <b class="text-capitalize" ng-if="operationplan.type == 'PO'">{{'receipt date'|translate}}</b>
        <b class="text-capitalize" ng-if="operationplan.type == 'DO'">{{'receipt date'|translate}}</b>
        <b class="text-capitalize" ng-if="operationplan.colmodel.enddate">{{operationplan.colmodel.enddate.label|translate}}</b>
        <b class="text-capitalize" ng-if="operationplan.colmodel.operationplan__enddate">{{operationplan.colmodel.operationplan__enddate.label|translate}}</b>&nbsp;
        <small data-ng-if="operationplan.colmodel.enddate">({{ operationplan.colmodel.enddate.type|translate }})</small>
        <small data-ng-if="operationplan.colmodel.operationplan__enddate">({{ operationplan.colmodel.operationplan__enddate.type|translate }})</small>
      </td>
      <td>
        <input data-ng-if='operationplan.id === -1 && operationplan.end' class="form-control border-0 bg-white" type="datetime-local" ng-model="operationplan.end" readonly>
        <input data-ng-if='operationplan.id !== -1 && !operationplan.hasOwnProperty("operationplan__enddate")' class="form-control" type="datetime-local" ng-model="operationplan.end" ng-model-options="{debounce: 300}" data-ng-readonly="!editable">
        <input data-ng-if='operationplan.id !== -1 && operationplan.hasOwnProperty("operationplan__enddate")' class="form-control" type="datetime-local" ng-model="operationplan.operationplan__enddate" ng-model-options="{debounce: 300}" data-ng-readonly="!editable">
      </td>
    </tr>
    <tr>
      <td><b class="text-capitalize">{{'quantity'|translate}}</b>&nbsp;
        <small data-ng-if="operationplan.id === -1 && !operationplan.colmodel.operationplan__quantity">({{ operationplan.colmodel.quantity.type|translate }})</small>
        <small data-ng-if="operationplan.id === -1 && operationplan.colmodel.operationplan__quantity">({{ operationplan.colmodel.operationplan__quantity.type|translate }})</small>
      </td>
      <td>
        <span data-ng-if="operationplan.id === -1">{{(operationplan.operationplan__quantity || operationplan.quantity || 0)|number}}</span>
        <input data-ng-if='operationplan.id !== -1 && !operationplan.hasOwnProperty("operationplan__quantity")' class="form-control" type="number" ng-model="operationplan.quantity" ng-model-options="{debounce: 300}" data-ng-readonly="!editable">
        <input data-ng-if='operationplan.id !== -1 && operationplan.hasOwnProperty("operationplan__quantity")' class="form-control" type="number" ng-model="operationplan.operationplan__quantity" ng-model-options="{debounce: 300}" data-ng-readonly="!editable">
      </td>
    </tr>
    <!--
    <tr data-ng-if="operationplan.type === 'MO' || (operationplan.id === -1 && (operationplan.colmodel.quantity_completed || operationplan.colmodel.operationplan__quantity_completed))">
      <td><b class="text-capitalize">{{'quantity completed'|translate}}</b>&nbsp;
        <small data-ng-if="operationplan.id === -1 && !operationplan.colmodel.operationplan__quantity_completed">({{ operationplan.colmodel.quantity_completed.type|translate }})</small>
        <small data-ng-if="operationplan.id === -1 && operationplan.colmodel.operationplan__quantity_completed">({{ operationplan.colmodel.operationplan__quantity_completed.type|translate }})</small>
      </td>
      <td>
        <span data-ng-if="operationplan.id === -1">{{(operationplan.operationplan__quantity_completed || operationplan.quantity_completed || 0)|number}}</span>
        <input data-ng-if='operationplan.id !== -1 && !operationplan.hasOwnProperty("operationplan__quantity_completed")' class="form-control" type="number" ng-model="operationplan.quantity_completed" ng-model-options="{debounce: 300}" data-ng-readonly="!editable">
        <input data-ng-if='operationplan.id !== -1 && operationplan.hasOwnProperty("operationplan__quantity_completed")' class="form-control" type="number" ng-model="operationplan.operationplan__quantity_completed" ng-model-options="{debounce: 300}" data-ng-readonly="!editable">
      </td>
    </tr>
    -->
    <tr data-ng-repeat="(key, value) in operationplan.colmodel"
      data-ng-if="['delay', 'criticality', 'quantity', 'startdate', 'enddate', 'color', 'quantity_completed', 'operationplan__delay', 'operationplan__criticality', 'operationplan__quantity', 'operationplan__startdate', 'operationplan__enddate', 'operationplan__color', 'operationplan__quantity_completed'].indexOf(key) == -1 && operationplan.hasOwnProperty(key) && operationplan[key] != null">
      <td><b class="text-capitalize">{{value.label|translate}}</b>&nbsp;
        <small>({{ value.type|translate }})</small>
      </td>
      <td data-ng-if="['number', 'color', 'currency', 'currencyWithBlanks'].includes(value['formatter'])">{{operationplan[key]|number:0}}</td>
      <td data-ng-if="value['formatter'] == 'date'">{{operationplan[key]|date:formatdatetime}}</td>
      <td data-ng-if="!['date', 'number', 'color', 'currency', 'currencyWithBlanks'].includes(value['formatter'])">{{operationplan[key]}}</td>
    </tr>
    <tr id="statusrow" data-ng-if="operationplan.type !== 'STCK'">
      <td><b class="text-capitalize">{{'status'|translate}}</b></td>
      <td>
        <div class="btn-group" role="group">
          <button id="proposedBtn" data-ng-if="(!editable && operationplan.status == 'proposed') || editable" type="button" class="btn btn-primary" data-ng-class="['text-capitalize', {'active': operationplan.status == 'proposed'}]" ng-click="operationplan.status = 'proposed'" data-ng-disabled="actions.hasOwnProperty('erp_incr_export') || !editable" data-bs-toggle="tooltip" title="{{'proposed'|translate}}"> <i class="fa fa-unlock"></i></button>
          <button id="approvedBtn" data-ng-if="(!editable && operationplan.status == 'approved') || editable" type="button" class="btn btn-primary" data-ng-class="['text-capitalize', {'active': operationplan.status == 'approved'}]" ng-click="operationplan.status = 'approved'" data-ng-disabled="actions.hasOwnProperty('erp_incr_export') || !editable" data-bs-toggle="tooltip" title="{{'approved'|translate}}"><i class="fa fa-unlock-alt"></i></button>
          <button id="confirmedBtn" data-ng-if="(!editable && operationplan.status == 'confirmed') || editable" type="button" class="btn btn-primary" data-ng-class="['text-capitalize', {'active': operationplan.status == 'confirmed'}]" ng-click="operationplan.status = 'confirmed'" data-ng-disabled="actions.hasOwnProperty('erp_incr_export') || !editable" data-bs-toggle="tooltip" title="{{'confirmed'|translate}}"><i class="fa fa-lock"></i></button>
          <button id="completedBtn" data-ng-if="(!editable && operationplan.status == 'completed') || editable" type="button" class="btn btn-primary" data-ng-class="['text-capitalize', {'active': operationplan.status == 'completed'}]" ng-click="operationplan.status = 'completed'" data-ng-disabled="actions.hasOwnProperty('erp_incr_export') || !editable" data-bs-toggle="tooltip" title="{{'completed'|translate}}"><i class="fa fa-check"></i></button>
          <button id="closedBtn" data-ng-if="(!editable && operationplan.status == 'closed') || editable" type="button" class="btn btn-primary" data-ng-class="['text-capitalize', {'active': operationplan.status == 'closed'}]" ng-click="operationplan.status = 'closed'" data-ng-disabled="actions.hasOwnProperty('erp_incr_export') || !editable" data-bs-toggle="tooltip" title="{{'closed'|translate}}"><i class="fa fa-times"></i></button>
          <button id="erp_incr_exportBtn" data-ng-if="editable && actions.hasOwnProperty('erp_incr_export') && operationplan.status == 'proposed'" type="button" class="btn btn-primary text-capitalize" ng-click="actions['erp_incr_export']()">{{'export'|translate}}</button>
        </div>
      </td>
    </tr>
    <tr data-ng-if="operationplan.hasOwnProperty('remark') && operationplan.type !== 'STCK'">
      <td><b class="text-capitalize">{{'remark'|translate}}</b></td>
      <td><input class="form-control" data-ng-model="operationplan.remark"></td>
    </tr>
  </tbody>
</table>
</div>