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

@section('modal-start')
    <form class="form-inline" ng-submit="vm.Tecelagem.gravarDefeito()">
@overwrite

@section('modal-header-left')

<h4 class="modal-title">
	<span></span>
</h4>

@overwrite

@section('modal-header-right')
	
    <button ng-disabled="!(vm.Tecelagem.lista_defeito.length > 0)" type="submit" class="btn btn-success" data-hotkey="f1">
        <span class="glyphicon glyphicon-ok"></span> Gravar
    </button>
	
	<button ng-click="vm.Tecelagem.cancelarDefeito()" type="button" class="btn btn-danger btn-cancelar" data-hotkey="esc">
        <span class="glyphicon glyphicon-ban-circle"></span> Cancelar
    </button>

@overwrite

@section('modal-body')
<div style="height: 500px;">

    <div style="width: 100%;
                border: 1px solid;
                padding: 5px;
                border-radius: 5px;
                background-color: #1072b4;
                margin-bottom: 10px;
                color: white;">

        <div style="width: 100%; display: flex;">
            <div style="width: calc(65% - 2px);"><strong>Remessa:</strong> @{{ vm.Tecelagem.TALAO_DEFEITO.REMESSA }}</div>
            <div style="width: calc(35% - 2px);"><strong>Talão ID:</strong> @{{ vm.Tecelagem.TALAO_DEFEITO.TALAO_ID }}</div>
        </div>

        <div style="width: 100%; display: flex;">
            <div style="width: calc(65% - 2px);"><strong>Detalhe:</strong> @{{ vm.Tecelagem.TALAO_DEFEITO.ID }}</div>
            <div style="width: calc(35% - 2px);"><strong>Quantidade:</strong> @{{ vm.Tecelagem.TALAO_DEFEITO.QUANTIDADE | number:0 }}</div>
        </div>

        <div style="width: 100%; display: flex;">
            <div style="width: calc(65% - 2px); color: yellow;"><strong>Operador:</strong> @{{ vm.OPERADORDEFEITO.OPERADOR_ID }} - @{{ vm.OPERADORDEFEITO.OPERADOR_NOME }}</div>
            <div style="width: calc(35% - 2px);">
        
            

            <span
                style="font-weight: bolder !important;"
                data-toggle="popover"
                data-placement="bottom" 
                data-element-content="#info-lista_defeitos" 
                data-original-title="Defeitos"><strong>Defeitos:</strong> @{{ vm.Tecelagem.TALAO_DEFEITO.DEFEITOS | number:0 }} <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span></span>

            <div id="info-lista_defeitos" style="display: none">
                <div class="origem-container">
                    <table class="table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th style="text-align: right;"  >ID</th>
                                <th style="text-align: left;"   >Defeito</th>
                                <th style="text-align: center;" >Clas.</th>
                                <th style="text-align: right;"  >Qtd.</th>
                                <th style="text-align: left;"   >Data/Hora</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="defeito in vm.Tecelagem.TALAO_DEFEITO.LISTA_DEFEITOS">
                                <td style="text-align: right;   white-space: nowrap;">@{{defeito.ID  | number:0}}</td>
                                <td style="text-align: left;    white-space: nowrap;">@{{defeito.DESCRICAO}}</td>
                                <td style="text-align: center;  white-space: nowrap;">@{{defeito.CLASSIFICACAO}}ª</td>
                                <td style="text-align: right;   white-space: nowrap;">@{{defeito.QUANTIDADE | number:0}}</td>
                                <td style="text-align: left;    white-space: nowrap;">@{{defeito.DATAHORA}}</td>
                            </tr>
                        </tbody>
                    </table> 
                </div>
            </div>

            </div>
        </div>

    </div>

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

    <div class="form-group" id="formGroupFator" style="width: 100px !important; display: inline-block; margin-right: 10px;">
        <label>Classificação:</label>
        <select style="width: 100px;" required="" name="repeatSelect" id="repeatSelect" ng-model="vm.Tecelagem.CLASSIFICACAO" class="">
            <option ng-value="2" selected="selected">2ª</option>
            <option ng-value="3">3ª</option>
            <option ng-value="4">4ª</option>
        </select>
    </div>

    <div class="form-group" id="formGroupFator" style="width: 100px !important; display: inline-block; margin-right: 10px;">
        <label>Quantidade:</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.Tecelagem.qtd_defeito">
        </div>
    </div>

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

    <div class="form-group" id="formGroupFator" style="display: inline-block; margin-right: 10px;">
        <label style="opacity: 0;">.</label>
        <div class="input-group" style="width: 100% !important;">
            <button ng-click="vm.Tecelagem.addDefeito();" type="button" class="btn btn-primary" data-hotkey="f6">
                <span class="glyphicon glyphicon-plus"></span> Incluir
            </button>
        </div>
    </div>

    <br><br>

    <div class="table-ec table-scroll" style="height: 300px;">
        <table class="table table-striped table-bordered table-condensed table-no-break table-middle table-low">
            <thead>
                <tr gc-order-by="vm.Tecelagem.ORDER_BY_DEF">                  
                    <th field="ID">ID</th>
                    <th field="DESCRICAO">Defeito</th>
                    <th field="DESCRICAO">Clas.</th>
                    <!--<th field="DESCRICAO">Colaborador</th>-->
                    <th field="QUANTIDADE">Qtd.</th>
                    <th style="width: 50px"></th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="item in vm.Tecelagem.DADOS_RENDER_DEF = ( vm.Tecelagem.lista_defeito )"
                    ng-focus="vm.Tecelagem.SELECTED_DEF = item"
                    ng-class="{ 'selected' : vm.Tecelagem.SELECTED_DEF == item }"
                    tabindex="0"
                    ng-if="item.DELETAR == false">
                    <td>
                        <span>
                            @{{ item.ID || 0 | lpad: [3,0] }}
                        </span>
                    </td>
                    <td>
                        <span>
                            @{{ item.DESCRICAO }}
                        </span>
                    </td>
                    <td>
                        <span>
                            @{{ item.CLASSIFICACAO | number:0  }}ª
                        </span>
                    </td>
                    <!--<td>
                        <span>
                            @{{ item.COLABORADOR.DESCRICAO }}
                        </span>
                    </td>-->
                    <td style="text-align: end;">
                        <span>
                            @{{ item.QUANTIDADE | number:0 }}
                        </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.Tecelagem.removerItemDefeito(item);">
                            <span class="glyphicon glyphicon-trash"></span>
                        </button>
                    </td>
                    
                </tr>
            </tbody>
        </table>
    </div>

</div>
@overwrite

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