@extends('helper.include.view.modal', ['id' => 'modal-lancamento-incluir','class_size'=>'modal-lg','fade'=>false])

@section('modal-start')
    <!--<form class="form-inline" ng-submit="">-->
@overwrite

@section('modal-header-left')

	<h4 class="modal-title">
		Incluir Defeito
	</h4>

@overwrite

@section('modal-header-right')
    <button ng-click="vm.Lancamento.confirmar()" class="btn btn-success" data-hotkey="f10" data-loading-text="Confirmando...">
        <span class="glyphicon glyphicon-ok"></span> 
        Confirmar
    </button>
    <button type="button" class="btn btn-danger btn-cancelar" ng-click="vm.Lancamento.cancelar()" data-hotkey="esc">
        <span class="glyphicon glyphicon-ban-circle"></span>
        Cancelar
    </button>
@overwrite

@section('modal-body')
<div style="height: 75vh">
    
    <div class="form-group">
        <label>Código de Barras do Talão:</label>
        <input 
            type="password" 
            placeholder="Importar dados do talão..." 
            autocomplete="nope"
            ng-init="vm.Lancamento.MODEL_CODIGO_BARRAS = '043970005603'" 
            ng-model="vm.Lancamento.MODEL_CODIGO_BARRAS" 
            ng-keydown="($event.key == 'Enter' && vm.Lancamento.MODEL_CODIGO_BARRAS != '' && vm.Lancamento.MODEL_CODIGO_BARRAS > 0) && vm.Lancamento.consultarTalaoDados(vm.Lancamento.MODEL_CODIGO_BARRAS); ($event.key == 'Enter' && vm.Lancamento.MODEL_CODIGO_BARRAS != '' && vm.Lancamento.MODEL_CODIGO_BARRAS > 0) && (vm.Lancamento.MODEL_CODIGO_BARRAS = '')"
            />
    </div>
    
    <div class="panel-filter">
        <form ng-submit=" (vm.Lancamento.ConsultaGp.FAMILIA_CONSUMO_REQ == 1 ? vm.Lancamento.modalRequisicaoConsumo('show',1) : vm.Lancamento.gravar() )">
            <div class="incluir-consulta-estabelecimento"></div>
            <div class="form-group">
                <label>Remessa:</label>
                <input 
                    type="text" 
                    form-validate="true" 
                    class="form-control input-menor" 
                    ng-model="vm.Lancamento.SELECTED.REMESSA"
                    ng-required="vm.REG_DEF_SEM_TALAO == '0'"
                    ng-blur="vm.Lancamento.consultarTalao()"
                    />
            </div>

            <div class="form-group">
                <label>Talão:</label>
                <input 
                    type="number"  
                    min="0" 
                    step="1" 
                    form-validate="true" 
                    class="form-control" 
                    style="width:50px" 
                    ng-model="vm.Lancamento.SELECTED.REMESSA_CONTROLE"
                    ng-required="vm.REG_DEF_SEM_TALAO == '0'"
                    ng-blur="vm.Lancamento.consultarTalao()"
                    />
            </div>

            <div class="form-group">
                <label>Detalhe:</label>
                <input 
                    type="number"  
                    min="0" 
                    step="1" 
                    form-validate="true" 
                    class="form-control" 
                    style="width:50px" 
                    ng-model="vm.Lancamento.SELECTED.ID"
                    ng-blur="vm.Lancamento.consultarTalao()"
                    />
            </div>

            <style>
                .incluir-consulta-gp input[type="search"] {
                    width: 200px !important;
                }
                .incluir-consulta-defeito input[type="search"] {
                    width: 310px !important;
                }
                .incluir-consulta-produto input[type="search"] {
                    width: 340px !important;
                }
            </style>
            <div class="inline incluir-consulta-gp"></div>
            <div class="inline incluir-consulta-defeito"></div>
            <div class="inline incluir-consulta-produto"></div>
            <div class="inline incluir-consulta-modelo-tamanho"></div>

            <div class="form-group">
                <label>Qtd.:</label>
                <input type="number" min="1" step="1" form-validate="true" class="form-control input-menor text-right input-qtd" ng-model="vm.Lancamento.SELECTED.QUANTIDADE" required />
            </div>        

            <div class="form-group">
                <label>Data Hora</label>
                <input type="datetime-local" class="form-control input-datetime" form-validate="true" ng-model="vm.Lancamento.SELECTED.DATAHORA_DATE" style="width: 165px !important;">
            </div>

            <div class="form-group">
                <label ttitle="Calssificação do defeito<br/>2ª | 3ª | 4ª">Class.:</label>
                <input type="number" min="2" max="4" step="1" form-validate="true" class="form-control" style="width: 46px" ng-model="vm.Lancamento.SELECTED.CLASSIFICACAO" required />
            </div>    

            <div class="form-group">
                <label ttitle="1: Diurno | 2: Noturno">Turno:</label>
                <input type="number" maxlength="1" step="1" max="2" form-validate="true" class="form-control" style="width: 46px" ng-model="vm.Lancamento.SELECTED.TURNO" required />
            </div>    


            <div class="form-group">
                <label>Observação</label>
                <input type="text" class="form-control input-maior"  form-validate="true" ng-model="vm.Lancamento.SELECTED.OBSERVACAO">
            </div>
            
            <button type="submit" class="btn btn btn-primary" style="padding-top: 2px;margin-top: 18px;">
                <span class="glyphicon glyphicon-ok"></span>
                Gravar
            </button>
        </form>
    </div>
    

    <div class="table-ec table-incluir" style="height: calc(100% - 235px);min-height: 100px;">
        <table class="table table-striped table-hover table-bordered table-condensed table-no-break">
            <thead>
                <tr>
                    <th                    >Req.     </th>
                    <th                    >Gp       </th>
                    <th                    >Defeito  </th>
                    <th                    >Setor    </th>
                    <th                    >Rem.     </th>
                    <th                    >Talão    </th>
                    <th                    >Produto  </th>
                    <th class="text-center">Tam.     </th>
                    <th class="text-right" >Qtd.     </th>
                    <th class="text-center">Data/Hora</th>
                    <th class="text-center">Tur      </th>
                    <th class="text-center">Class.   </th>                  
                    <th></th>                  
                </tr>
            </thead>
            <tbody>
                <tr 
                    ng-repeat="lancamento in vm.Lancamento.DADOS_INCLUIR">
                    <td>
                        <span
                            class="glyphicon glyphicon-info-sign" 
                            data-toggle="popover" 
                            data-placement="right" 
                            title="Requisição de Consumo"
                            data-element-content="#requisicao-consumo-@{{ $index }}"
                            on-finish-render="bs-init"
                        ></span>
                        <div id="requisicao-consumo-@{{ $index }}" style="display: none">
                            <div class="table-ec" style="height: calc(100% - 25px);">
                                <table class="table table-hover table-striped table-bordered table-no-break table-condensed">
                                    <thead>
                                        <tr>
                                            <th>Família</th>
                                            <th>Produto</th>
                                            <th class="text-right" ttitle="Quantidade a requisitar">Qtd. Req.</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr
                                            ng-repeat="consumo in lancamento.CONSUMO_REQUISICAO"
                                            ng-if="consumo.QUANTIDADE > 0"
                                            id="table-consumo-@{{ consumo.ID }}">
                                            <td>@{{ consumo.FAMILIA_ID }} - @{{ consumo.FAMILIA_DESCRICAO }}</td>
                                            <td>@{{ consumo.PRODUTO_ID }} - @{{ consumo.PRODUTO_DESCRICAO }}</td>
                                            <td class="text-right">@{{ consumo.QUANTIDADE }} @{{ consumo.UM }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>                            
                        </div>                        
                        
                        
                    </td>
                    <td title="Id: @{{ delfeito.GP_ID }}">@{{ lancamento.GP_DESCRICAO }}</td>
                    <td title="Id: @{{ lancamento.DEFEITO_ID | lpad:[3,0] }}">@{{ lancamento.DEFEITO_DESCRICAO }}</td>
                    <td>@{{ lancamento.SETOR }}</td>
                    <td>@{{ lancamento.REMESSA }}</td>
                    <td>@{{ lancamento.REMESSA_CONTROLE | lpad:[4,0] }}</td>
                    <td title="Id: @{{ lancamento.PRODUTO_ID | lpad:[6,0] }}">@{{ lancamento.PRODUTO_DESCRICAO }}</td>
                    <td class="text-center">@{{ lancamento.TAMANHO_DESCRICAO }}</td>
                    <td class="text-right">@{{ lancamento.QUANTIDADE | number : 0 }}</td>
                    <td class="text-center">@{{ lancamento.DATAHORA_DATE | date : 'dd/MM/yy HH:mm' }}</td>
                    <td class="text-center">@{{ lancamento.TURNO }}</td>
                    <td class="text-center">@{{ lancamento.CLASSIFICACAO }}</td>
                    <td style="padding: 0;">
                        <button type="button" class="btn btn-danger btn-xs" style="margin-top: 2px;padding: 4px 10px;margin-left: 2px;" ng-click="vm.Lancamento.excluir(lancamento)">
                            <span class="glyphicon glyphicon-trash"></span>
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>   
</div>

@overwrite

@section('modal-end')
    <!--</form>-->
@overwrite