@extends('helper.include.view.modal', ['id' => 'modal-defeito-acao', 'class_size' => 'modal-menor'])

@section('modal-start')
@overwrite

@section('modal-header-left')
    <h4 class="modal-title">
        22609 - Registro de defeitos
    </h4>

@overwrite

@section('modal-header-right')
    <button ng-show="vm.Defeitos.REGISTRANDO_DEFEITOS == 1" type="button" class="btn btn-success" ng-click="vm.Defeitos.post()"
        data-hotkey="f1">
        <span class="glyphicon glyphicon-ok"></span>
        Gravar
    </button>
    <button ng-show="vm.Defeitos.REGISTRANDO_DEFEITOS == 1" type="button" class="btn btn-danger btn-voltar"
        ng-click="vm.Defeitos.LIST = []; vm.Defeitos.TALAO = {};" data-dismiss="modal" data-hotkey="esc">
        <span class="glyphicon glyphicon-ban-circle"></span>
        Cancelar
    </button>
    <button ng-show="!vm.Defeitos.REGISTRANDO_DEFEITOS == 1" type="button" class="btn btn-default btn-voltar"
        data-dismiss="modal" data-hotkey="esc">
        <span class="glyphicon glyphicon-chevron-left"></span>
        Voltar
    </button>
@overwrite

@section('modal-body')

    <button ng-if="!vm.Defeitos.REGISTRANDO_DEFEITOS == 1" ng-click="vm.Defeitos.auth()"
        style="display: flex;justify-content: center;align-items: center;background-color: rgb(255, 247, 0);color: rgb(0, 0, 0);border-radius: 8px;height: 50px;border: 2px solid black;width: 100%;">
        <h4 style="text-align: center">AUTENTICAR</h4>
    </button>

    <div ng-if="vm.Defeitos.REGISTRANDO_DEFEITOS == 1"
        style="display: flex; position: relative; justify-content: center; align-items: center; background-color: #131313; color: rgb(255, 247, 0); border-radius: 8px;width: 100%; margin-bottom: 10px;">

        <h4 style="text-align: center">@{{ vm.Defeitos.OPERADOR_DEFEITOS.OPERADOR_NOME }} | @{{ vm.Defeitos.TIMER }}s</h4>

        <button ng-if="vm.Defeitos.REGISTRANDO_DEFEITOS == 1" ng-click="vm.Defeitos.logout()"
            style="display: flex; position: absolute; right: 8px; justify-content: center; align-items: center; background-color: #c14b4b; color: rgb(255, 255, 255); border-radius: 8px; height: 86%;">

            <span class="fa fa-sign-out"></span> Sair

        </button>
    </div>

    <div ng-show="vm.Defeitos.REGISTRANDO_DEFEITOS == 1">

        <form class="form-inline" ng-submit="vm.Defeitos.search()">
            <div class="main-container">
                <input type="text" required="" style="width:100%; -webkit-text-security: disc;" form-validate="true"
                    placeholder="Informe o código de barras" ng-model="vm.Defeitos.COD_BARRAS" id="cod_bar_defeito"
                    class="ng-pristine ng-empty ng-invalid ng-invalid-required ng-touched">
            </div>
        </form>

        <br>

        <div class="card" ng-show="vm.Defeitos.TALAO.REMESSA_TALAO_ID">
            <div class="column">
                <div>
                    <div class="form-group" style="width: 215px !important; display: inline-block; margin-right: 10px;">
                        <label>Talão Dt.</label>
                        <div class="input-group" style="width: 100% !important;">
                            <input type="number" max="999999" min="0" step="1"
                                style="border-radius: 3px; text-align: end;" class="form-control input-medio"
                                ng-value="vm.Defeitos.TALAO.REMESSA_TALAO_ID" disabled>
                        </div>
                    </div>
                    <div class="form-group" style="width: 215px !important; display: inline-block; margin-right: 10px;">
                        <label>Talao Ac.</label>
                        <div class="input-group" style="width: 100% !important;">
                            <input type="number" max="999999" min="0" step="1"
                                style="border-radius: 3px; text-align: end;" class="form-control input-menor"
                                ng-model="vm.Defeitos.TALAO.REMESSA_ACUMULADO_CONTROLE" disabled>
                        </div>
                    </div>

                </div>
                <div>
                    <div>
                        <div class="form-group" style="display: inline-block; margin-right: 10px;">
                            <label>Modelo</label>
                            <div class="input-group">
                                <input type="text" max="999999" min="0" step="1"
                                    style="border-radius: 3px; text-align: start;" class="form-control input-maior"
                                    value="@{{ vm.Defeitos.TALAO.MODELO_DESCRICAO }}" disabled>
                            </div>
                        </div>

                    </div>
                    <div>
                        <div class="form-group" style="display: inline-block;margin-right: 10px;/* width: 200px; */">
                            <label>Cor</label>
                            <div class="input-group" style="width: 244px;">
                                <input type="text" style="border-radius: 3px;text-align: start;width: 100% !important;"
                                    class="form-control input-medio" value="@{{ vm.Defeitos.TALAO.COR_DESCRICAO }}" disabled>
                            </div>
                        </div>
                        <div class="form-group" style="display: inline-block; margin-right: 10px;">
                            <label>Tam.</label>
                            <div class="input-group">
                                <input type="text" style="border-radius: 3px; text-align: start;"
                                    class="form-control input-menor" value="@{{ vm.Defeitos.TALAO.TAM_DESC }}" disabled>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <br>

        <div style="display: -webkit-inline-box;" id="consulta-defeito-new" class="consulta-defeito-new"></div>

        <div class="form-group" id="formGroupFator"
            style="width: 140px !important; display: inline-block; margin-right: 10px;">
            <label>Setor responsável:</label>
            <div class="input-group" style="width: 100% !important;">
                <input type="text" max="999999" min="0" step="1"
                    style="width: 105% !important;  border-radius: 3px; text-align: start;"
                    class="form-control item-defeito-fator" ng-value="vm.ConsultaDefeitoNew.selected.SETOR" disabled>
            </div>
        </div>

        <div class="form-group" id="formGroupFator"
            style="width: 140px !important; display: inline-block; margin-right: 10px;">
            <label>Quantidade Defeito:</label>
            <div class="input-group" style="width: 100% !important;">
                <input type="number" max="999999" min="0" step="1"
                    style="width: 100% !important;  border-radius: 3px; text-align: end;"
                    class="form-control item-defeito-fator" ng-model="vm.Defeitos.qtd_defeito">
            </div>
        </div>

        <div style="display: -webkit-inline-box;" id="consulta-filtro-colab-new" class="consulta-filtro-colab-new"></div>

        <div class="form-group" id="formGroupFator"
            style="width: 215px !important; display: inline-block; margin-right: 10px;">
            <label>Documento:</label>
            <div class="input-group" style="width: 100% !important;">
                <input type="text" style="width: 100% !important;  border-radius: 3px; text-align: end;"
                    class="form-control" ng-model="vm.Defeitos.DOCUMENTO">
            </div>
        </div>

        <div class="form-group" id="formGroupFator">
            <label>Observação:</label>
            <div class="input-group" style="width: 100% !important;">

                <textarea minlength="0" maxlength="100" name="a" id="aa" cols="30" rows="3"
                    type="text" style="width: 100% !important;  border-radius: 3px; text-align: start;" class="form-control"
                    ng-model="vm.Defeitos.OBSERVACAO"></textarea>

                {{-- <input type="text" style="width: 100% !important;  border-radius: 3px; text-align: end;" class="form-control"
                ng-model="vm.Defeitos.OBSERVACAO"> --}}
            </div>
        </div>
        <div class="form-group" id="formGroupFator"
            style="display: flex;/* margin-right: 10px; */width: 100%;justify-content: flex-end;">
            <label style="opacity: 0;">.</label>
            <div class="input-group">
                <button ng-click="vm.Defeitos.add();" type="button" class="btn btn-primary" data-hotkey="alt+i">
                    <span class="glyphicon glyphicon-plus"></span> Incluir
                </button>
            </div>
        </div>
        <br>
        <div class="table-ec table-scroll" style="height: 160px;">
            <table class="table table-striped table-bordered table-condensed table-no-break table-middle table-low">
                <thead>
                    <tr gc-order-by="vm.Defeitos.ORDER_BY_DEF">
                        <th field="ID">ID</th>
                        <th field="DOCUMENTO">Documento</th>
                        <th field="DESCRICAO">Defeito</th>
                        <th field="DESCRICAO">Colaborador</th>
                        <th field="QUANTIDADE">Qtd.</th>
                        <th field="OBSERVACAO">Observação</th>
                        <th style="width: 50px"></th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="item in vm.Defeitos.DADOS_RENDER_DEF = ( vm.Defeitos.LIST )"
                        ng-focus="vm.Defeitos.SELECTED_DEF = item"
                        ng-class="{ 'selected' : vm.Defeitos.SELECTED_DEF == item }" tabindex="0"
                        ng-if="item.DELETAR == false">
                        <td>
                            <span>
                                @{{ item.ID || 0 | lpad: [3, 0] }}
                            </span>
                        </td>
                        <td style="text-align: end;">
                            <span>
                                @{{ item.DOCUMENTO | number: 0 }}
                            </span>
                        </td>
                        <td>
                            <span>
                                @{{ item.DESCRICAO }}
                            </span>
                        </td>
                        <td>
                            <span>
                                @{{ item.COLABORADOR.DESCRICAO }}
                            </span>
                        </td>
                        <td style="text-align: end;">
                            <span>
                                @{{ item.QUANTIDADE | number: 0 }}
                            </span>
                        </td>
                        <td style="text-align: end;">
                            <span>
                                @{{ item.OBSERVACAO }}
                            </span>
                        </td>
                        <td style="width: 50px; padding: 3px;">
                            <button type="button" class="btn btn-sm btn-danger " style="margin-left: 6px;"
                                aria-expanded="false" ng-click="vm.Defeitos.del(item);">
                                <span class="glyphicon glyphicon-trash"></span>
                            </button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
@overwrite

@section('modal-end')
@overwrite