@extends('helper.include.view.modal', ['id' => 'modal-consulta-requisicao','fade'=>false, 'class_size'=>'modal-big'])

@section('modal-header-left')

	<h4 class="modal-title">
		Consulta de Requisições
	</h4>

@overwrite

@section('modal-header-right')
	<button 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')

    <form class="form-inline" ng-submit="vm.TalaoCorte.consultarRequisicao();">
        <div class="panel-filter">

            <div class="form-group">
                <label>Código de Barras do Talão:</label>
                <input 
                    id="input-requisitar-codigo-barras"
                    type="password" 
                    placeholder="Importar dados do talão..." 
                    autocomplete="nope"
                    form-validate="true" 
                    ng-change="vm.TalaoCorte.REQUISICOES = []"
                    ng-model="vm.TalaoCorte.MODEL_CODIGO_BARRAS" 
                    />
            </div>
            
            <span style="top: 8px;position: relative;margin-right: 10px;">ou</span>
            
            <div class="form-group">
                <label>Remessa:</label>
                <input 
                    type="number" 
                    min="0" 
                    step="1" 
                    form-validate="true" 
                    class="form-control input-menor clearable" 
                    ng-model="vm.TalaoCorte.MODEL_REMESSA_ID"
                    ng-change="vm.TalaoCorte.REQUISICOES = []"
                    ng-required="vm.TalaoCorte.MODEL_REMESSA_TALAO_ID > 0"
                    />
            </div>

            <div class="form-group">
                <label>Talão:</label>
                <input 
                    type="number"  
                    min="0" 
                    step="1" 
                    form-validate="true" 
                    class="form-control clearable" 
                    style="width:70px" 
                    ng-model="vm.TalaoCorte.MODEL_REMESSA_TALAO_ID"
                    ng-change="vm.TalaoCorte.REQUISICOES = []"
                    ng-required="vm.TalaoCorte.MODEL_REMESSA_ID > 0"
                    />
            </div>            

            <button 
                type="submit" 
                class="btn btn-primary btn-xs" 
                data-hotkey="alt+f"
                >
                <span class="glyphicon glyphicon-filter"></span>Filtrar
            </button>

        </div>
    </form>

    <style>
        .t-status:before{margin-top: 3px !important;}
        .t-status.sobra-0:before {background-color: red;  }
        .t-status.sobra-1:before {background-color: green;}
        .t-status.sobra-2:before {background-color: gray; }
    </style>
    
    <div style="width: 100%; height: calc(100vh - 220px); overflow: auto;">
        <div style="width: 100%;" ng-if="vm.TalaoCorte.CONSULTA_EXECUTADA && vm.TalaoCorte.REQUISICOES.length == 0" class="card">
            <h4> Talão não tem requisições  </h4>
            <div class="row" style="margin-top: 7px;">
            </div>
        </div>

        <div style="width: calc(100% - 6px); margin: 3px;" ng-if="vm.TalaoCorte.CONSULTA_EXECUTADA && vm.TalaoCorte.REQUISICOES.length > 0" class="card" ng-repeat="item in vm.TalaoCorte.REQUISICOES">
            <h4> Requisição:@{{item.ID}}</h4>
            <div class="row" style="margin: 0px; padding: 5px; font-size: 15px;">

                <span><strong>Data/Hora Requisição:</strong> @{{item.DATAHORA}}</span>
                <span><strong>Remessa:</strong> @{{item.PROGRAMACAO.REMESSA}}</span>
                <span><strong>Talão:</strong> @{{item.PROGRAMACAO.TALAO}}</span>

                <div class="info-talao-modal" style="width: 100%; margin-top: 5px; margin-bottom: 6px;">
                    <div class="descricao">Detalhamento de Talões</div>
                    <div>
                        <table class="tabela-items-info-talao">
                            <tr>
                                <th class="text-center" ttitle="Status<br/>Vermelho: Em Aberto | Verde: Produzido | Cinza: Encerrado">
                                    <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
                                </th>
                                <th>ID</th>
                                <th>Produto</th>
                                <th>Tamanho</th>
                                <th>Qunatidade</th>
                                <th>Data/Hora Produção</th>
                            </tr>
                            <tr ng-repeat="historico in item.TALOES track by $index" >
                                <td class="t-status talao-@{{historico.STATUS}}"></td>
                                <td style="text-align: start;">@{{historico.ID}}</td>
                                <td style="text-align: start;">@{{historico.PRODUTO}}</td>
                                <td style="text-align: start;">@{{historico.TAMANHO}}</td>
                                <td style="text-align: end;"  >@{{historico.QUANTIDADE | number:0}}</td>
                                <td style="text-align: center;">@{{historico.HORA_PRODUCAO}}</td>
                            </tr>
                        </table>
                    </div>
                </div>

                <div class="info-talao-modal" style="width: 100%; margin-bottom: 6px;">
                    <div class="descricao">Aproveitamento de Sobras</div>
                    <div>
                        <table class="tabela-items-info-talao">
                            <tr>
                                <th class="text-center" ttitle="Status<br/>Vermelho: Em Aberto | Verde: Pago | Cinza: Encerrado">
                                    <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
                                </th>
                                <th>ID</th>
                                <th>Endereçamento</th>
                                <th>Quantidade</th>
                                <th>Saldo</th>
                            </tr>
                            <tr ng-repeat="historico in item.SOBRAS track by $index" >
                                <td class="t-status sobra-@{{historico.STATUS}}"></td>
                                <td style="text-align: start;">@{{historico.ID}}</td>
                                <td style="text-align: start;">@{{historico.ENDERECAMENTO}}</td>
                                <td style="text-align: end;"  >@{{historico.QUANTIDADE | number:0}}</td>
                                <td style="text-align: end;"  >@{{historico.SALDO      | number:0}}</td>
                            </tr>
                        </table>
                    </div>
                </div>

                <div class="info-talao-modal" style="width: 100%; margin-bottom: 6px;">
                    <div class="descricao">Placas de Bojo</div>
                    <div>
                        <table class="tabela-items-info-talao">
                            <tr>
                                <th class="text-center" ttitle="Status<br/>Vermelho: Em Aberto | Verde: Pago | Cinza: Encerrado">
                                    <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
                                </th>
                                <th>ID</th>
                                <th>Descrição</th>
                                <th>Quantidade</th>
                                <th>Saldo</th>
                            </tr>
                            <tr ng-repeat="historico in item.PLACAS track by $index" >
                                <td class="t-status placa-@{{historico.STATUS}}"></td>
                                <td style="text-align: start;">@{{historico.ID}}</td>
                                <td style="text-align: start;">@{{historico.DESCRICAO}}</td>
                                <td style="text-align: end;"  >@{{historico.QUANTIDADE | number:0}}</td>
                                <td style="text-align: end;"  >@{{historico.SALDO      | number:0}}</td>
                            </tr>
                        </table>
                    </div>
                </div>
                
                <div class="info-talao-modal"  style="width: 100%; margin-bottom: 6px;">
                    <div class="descricao">Histórico do Talão</div>
                    <div>
                        <table class="tabela-items-info-talao">
                            <tr>
                                <th>Status</th>
                                <th>Data/Hora</th>
                                <th>Operador</th>
                                <th>Justificativa</th>
                                <th>Estação</th>
                                <th>Tipo</th>
                                <th>TEMPO</th>
                            </tr>
                            <tr ng-repeat="historico in item.HISTORICO track by $index" >
                                <td>@{{historico.STATUS}}</td>
                                <td>@{{historico.DATAHORA}}</td>
                                <td>@{{historico.OPERADOR}}</td>
                                <td>@{{historico.JUSTIFICATIVA}}</td>
                                <td>@{{historico.ESTACAO}}</td>
                                <td>@{{historico.TIPO}}</td>
                                <td ng-class="{
                                        'ind-vermelho' : historico.FLAG == 0,
                                        'ind-amarelo'  : historico.FLAG == 1,
                                        'ind-verde'	   : historico.FLAG == 2,
                                        'ind-branco'   : historico.FLAG == 3
                                    }">@{{ historico.FLAG == 3 ? 'REC' : historico.TEMPO}}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

@overwrite