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

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

@section('modal-header-left')

	<h4 class="modal-title">
		<span style="font-size: 18px !important;" ng-if="vm.DETALHAMENTO_TIPO == 1">15060 - Detalhe Alocação</span>
		<span style="font-size: 18px !important;" ng-if="vm.DETALHAMENTO_TIPO == 2">15060 - Detalhe Empenho</span>
		<span style="font-size: 18px !important;" ng-if="vm.DETALHAMENTO_TIPO == 3">15060 - Detalhe OC's</span>
	</h4>

@overwrite

@section('modal-header-right')

    <button type="button" class="btn btn-default btn-cancelar" ng-click="vm.fecharModalAlocacaoProduto();" data-hotkey="esc">
        <span class="glyphicon glyphicon-chevron-left"></span>
        Voltar
    </button>
@overwrite

@section('modal-body')

	<div class="resize resize-localizacao table-lc table-aloc" style="min-height: 370px;">
		<!-- ALOCAÇÃO -->
		<div class="form-group">
            <label>Produto:</label>
            <input type="text" class="form-control input-maior"
                style="width: 270px !important;"
                ng-model="vm.EstoqueLocalizacao.selected.PRODUTO_ID + ' - ' + vm.EstoqueLocalizacao.selected.PRODUTO_DESCRICAO"
                ng-readonly="true">
        </div>
        
        <div class="form-group">
            <label>Estabelecimento:</label>
            <input type="text" class="form-control input-maior"
                style="width: 270px !important;"
                ng-model="vm.EstoqueLocalizacao.selected.ESTABELECIMENTO_ID + ' - ' + vm.EstoqueLocalizacao.selected.ESTABELECIMENTO_NOMEFANTASIA"
                ng-readonly="true">
        </div>

        <div class="form-group">
            <label>Localização:</label>
            <input type="text" class="form-control input-maior"
                style="width: 270px !important;"
                ng-model="vm.EstoqueLocalizacao.selected.LOCALIZACAO_ID + ' - ' + vm.EstoqueLocalizacao.selected.LOCALIZACAO_DESCRICAO"
                ng-readonly="true">
        </div>
		
		<div style="display: inline;" class="consulta-tamanho-alocacao"></div>
		<div class="tabela_alocacao" id="tabela_alocacao"></div>

		<!-- <div style="display: flex;">
			<input type="text" class="form-control input-filter-table"
				   ng-model="vm.EstoqueAlocacao.A_FILTRO"
				   placeholder="Filtragem rápida..."
				   style="width: calc(80%); margin-bottom: 5px; height: 34px; float: right; margin-top: 21px;">
		</div> -->

        <!-- <div class="table-container table-lc" ng-if="vm.DETALHAMENTO_TIPO == 1" style="height: 500px;">
			<table class="table-alc table table-striped tab_enter table-bordered table-condensed table-no-break table-middle table-low">
                <thead>
					<tr>
						<th>Origem</th>
						<th>Número</th>
						<th>Cliente/Colaborador</th>
						<th>Dt.Emissão</th>
						<th>Dt.Cliente</th>
						<th class="text-right">Quantidade</th>
						<th>Tamanho</th>
						<th style="text-align: center;">Opções</th>
					</tr>
                </thead>
				<tbody>
					<tr ng-repeat="item in vm.DADOS_DETALHAMENTO
								| find : {
									model : vm.EstoqueAlocacao.A_FILTRO,
									fields : [
										'ORIGEM',
										'NUMERO',
										'CLIENTE',
										'COLABORADOR',
										'DATA_EMISSAO',
										'DATA_CLIENTE',
										'QUANTIDADE',
										'UM'
									]
								}" ng-class="{'selected' : (vm.SELECTED_ALOCACAO == item)}"
								   ng-click="vm.PreencherBackupAlocacao(vm.DADOS_DETALHAMENTO);vm.setarSelected(item)"
								   ng-focus="vm.PreencherBackupAlocacao(vm.DADOS_DETALHAMENTO);vm.setarSelected(item)"
								   tabindex="0">
						<td>@{{ item.ORIGEM }}</td>
						<td><span class="link_pre_pedido" ng-click="vm.AbrirPrePedidoOrPedido(item)">@{{ item.NUMERO }}</span></td>
						<td ng-show="item.CLIENTE != ''">@{{ item.CLIENTE }}</td>
						<td ng-show="item.COLABORADOR != ''">@{{ item.COLABORADOR }}</td>
						<td ng-show="item.COLABORADOR == '' && item.CLIENTE == ''">@{{ item.COLABORADOR }}</td>
						<td>@{{ item.DATA_EMISSAO }}</td>
						<td>@{{ item.DATA_CLIENTE }}</td>
						<td class="text-right">@{{ item.QUANTIDADE }} @{{ item.UM }}</td>
						<td>@{{ item.PRODUTO_TAMANHO }}</td>
						<td style="text-align: center;">
							<button title="Excluir alocação do item" ng-click="vm.desalocarItem(item)" type="button" class="btn btn-danger" 
									style="width: 30px; text-align: center;">
								<span class="glyphicon glyphicon-trash" style="font-size: 11px; left: -3px; top: 0px;"></span>
							</button>
						</td>
					</tr>
					<tr style="font-weight: bolder;" tabindex="0">
						<td style="position: sticky; bottom: 0; z-index: 2; background-color: rgb(191, 191, 191);">TOTAL</td>
						<td style="position: sticky; bottom: 0; z-index: 2; background-color: rgb(191, 191, 191); text-align: right;"></td>
						<td style="position: sticky; bottom: 0; z-index: 2; background-color: rgb(191, 191, 191); text-align: right;"></td>
						<td style="position: sticky; bottom: 0; z-index: 2; background-color: rgb(191, 191, 191); text-align: right;"></td>
						<td style="position: sticky; bottom: 0; z-index: 2; background-color: rgb(191, 191, 191); text-align: right;"></td>
						<td style="position: sticky; bottom: 0; z-index: 2; background-color: rgb(191, 191, 191); text-align: right;"
							class="text-right">@{{ vm.TOTAL_DETALHAMENTO }} </td>
						<td style="position: sticky; bottom: 0; z-index: 2; background-color: rgb(191, 191, 191); text-align: right;"></td>
						<td style="position: sticky; bottom: 0; z-index: 2; background-color: rgb(191, 191, 191); text-align: right;"></td>
					</tr>
				</tbody>
            </table>            
        </div> -->
		
		<!-- EMPENHADO -->
		<div class="table-container table-lc" ng-if="vm.DETALHAMENTO_TIPO == 2">
            <table class="table table-striped tab_enter table-bordered table-condensed table-no-break table-middle table-low">
                <thead>
					<tr>
						<th>Remessa</th>
						<th>Data</th>
						<th class="text-right">Quantidade</th>
						<th>Grade</th>
					</tr>
                </thead>
				<tbody>
					<tr ng-repeat="item in vm.DADOS_DETALHAMENTO track by $index" tabindex="0">
						<td style="@{{(item.REMESSA+'').indexOf('FALHA') > -1 ? ' color: rgb(255, 0, 0); font-weight: bolder;': ''}}">@{{ item.REMESSA }}</td>
						<td>@{{ item.DATA }}</td>
						<td class="text-right">@{{ item.QUANTIDADE || 0 | number: 5 }} @{{ item.UM }}</td>
						<td>@{{ item.LISTA_TAMANHO }}</td>
					</tr>
					<tr style="font-weight: bolder;" tabindex="0">
						<td style="position: sticky; bottom: 0; z-index: 2; background-color: rgb(191, 191, 191);">TOTAL</td>
						<td style="position: sticky; bottom: 0; z-index: 2; background-color: rgb(191, 191, 191); text-align: right;"></td> 
						<td style="position: sticky; bottom: 0; z-index: 2; background-color: rgb(191, 191, 191); text-align: right;" 
							class="text-right">@{{ vm.TOTAL_DETALHAMENTO || 0 | number: 5 }} </td>
						<td style="position: sticky; bottom: 0; z-index: 2; background-color: rgb(191, 191, 191); text-align: right;"></td>
					</tr>
				</tbody>
            </table>
        </div>
		
		<!-- OC -->
		<div class="table-container table-lc" ng-if="vm.DETALHAMENTO_TIPO == 3">
            <table class="table table-striped tab_enter table-bordered table-condensed table-no-break table-middle table-low ">
                <thead>
					<tr>
						<th>Nr.OC.</th>
						<th>Fornecedor</th>
						<th>Dt.Emissão</th>
						<th>Prev.Entrega</th>
						<th class="text-right">Quantidade</th>
						<th>Grade</th>
					</tr>
                </thead>
				<tbody>
					<tr ng-repeat="item in vm.DADOS_DETALHAMENTO track by $index" tabindex="0">
						<td>@{{ item.NUMERO_OC }}</td>
						<td>@{{ item.FORNECEDOR_DESCRICAO }}</td>
						<td>@{{ item.DATA_EMISSAO }}</td>							
						<td>@{{ item.PREV_ENTREGA }}</td> 
						<td class="text-right">@{{ item.QUANTIDADE || 0 | number: 5 }} @{{ item.UM }}</td>
						<td>@{{ item.LISTA_TAMANHO }}</td> 
					</tr> 
					<tr style="font-weight: bolder;" tabindex="0">
						<td style="position: sticky; bottom: 0; z-index: 2; background-color: rgb(191, 191, 191);">TOTAL</td>
						<td style="position: sticky; bottom: 0; z-index: 2; background-color: rgb(191, 191, 191); text-align: right;"></td>
						<td style="position: sticky; bottom: 0; z-index: 2; background-color: rgb(191, 191, 191); text-align: right;"></td>
						<td style="position: sticky; bottom: 0; z-index: 2; background-color: rgb(191, 191, 191); text-align: right;"></td>							
						<td style="position: sticky; bottom: 0; z-index: 2; background-color: rgb(191, 191, 191); text-align: right;" 
							class="text-right">@{{ vm.TOTAL_DETALHAMENTO || 0 | number: 5 }} </td>
						<td style="position: sticky; bottom: 0; z-index: 2; background-color: rgb(191, 191, 191); text-align: right;"></td>
					</tr> 
				</tbody>
            </table>
			
        </div>
    </div>
</form>
@overwrite