@extends('master')

@section('titulo')
    {{ Lang::get('fiscal/_21110.titulo') }}
@endsection

@section('estilo')
    <link rel="stylesheet" href="{{ elixir('assets/css/21110.css') }}" />
@endsection

@section('conteudo')
<div ng-controller="Ctrl as vm" ng-cloak>

	<ul class="list-inline acoes">    
		<li>
            <button 
                type="button" 
                class="btn btn-primary btn-incluir" 
                data-hotkey="f6"
                ng-disabled="!{{ userMenu($menu)->INCLUIR }}" 
                ng-click="vm.CADDEOPEINTDOCFiscais.incluir()">
                <span class="glyphicon glyphicon-plus"></span> Incluir
			</button>
			<button 
				type="button" 
				class="btn btn-default" 
				id="filtrar-toggle" 
				data-toggle="collapse" 
				data-target="#filtro_main" 
				aria-expanded="true" 
				aria-controls="filtro_main">
					Filtro
				<span class="caret"></span>
			</button>
		</li>                                        
	</ul>  
        
    <style>
        .t-status.status-0:before {
            background-color: rgb(217, 83, 79);    
        }
        
        .t-status.status-1:before {
            background-color: rgb(68, 157, 68);            
        }
		
		.table-condensed > thead > tr > th,
		.table-condensed > thead > tr > td,
		.table-condensed > tbody > tr > th,
		.table-condensed > tbody > tr > td,
		.table-condensed > tfoot > tr > th,
		.table-condensed > tfoot > tr > td {
			padding: 5px !important;
		}

		.verticalTableHeader {
			text-align:center;
			white-space:nowrap;
			transform-origin:50% 50%;
			-webkit-transform: rotate(90deg);
			-moz-transform: rotate(90deg);
			-ms-transform: rotate(90deg);
			-o-transform: rotate(90deg);
			transform: rotate(90deg);
			
		}
		.verticalTableHeader:before {
			content:'';
			padding-top:110%;/* takes width as reference, + 10% for faking some extra padding */
			display:inline-block;
			vertical-align:middle;
		}
        
	</style>

	<form ng-submit="vm.CADDEOPEINTDOCFiscais.consultar(1)" class="form-inline">		
		<div id="filtro_main" class="table-filter collapse in" aria-expanded="true" 
			style="margin-bottom: 4px; background: rgba(221,221,221,.33);
				   padding: 2px 10px 7px; border-radius: 5px;">
			
			<div class="form-group">
				<label>Status:</label>
				<select 
					class="form-control" 
					ng-model="vm.CADDEOPEINTDOCFiscais.STATUS">	
					<option value="">Todos</option>
					<option value="1">Ativos</option>
					<option value="0">Inativos</option>
				</select>
			</div>

			<div class="form-group">
				<label>Natureza:</label>
				<select 
					class="form-control" 
					ng-model="vm.CADDEOPEINTDOCFiscais.TIPO"
					ng-change="vm.mudarTipo(vm.CADDEOPEINTDOCFiscais.TIPO); ">	
					<option value="">Todos</option>
					<option value="E">Entrada</option>
					<option value="S">Saída</option>
				</select>
			</div>

			<div style="display: -webkit-inline-box;" class="consulta-filtro-estab"></div>
			<div style="display: -webkit-inline-box;" class="consulta-filtro-cfop2"></div>
			<div style="display: -webkit-inline-box;" class="consulta-conta-filtro"></div>

			<div class="form-group" style="width: calc(100% - 1040px); padding-top: 15px; min-width: 200px;">
				<input type="text" style="width: 100% !important; min-width: 170px;" placeholder="Filtragem por Código e Descrição"
					class="form-control input-maior filter_main" ng-model="vm.CADDEOPEINTDOCFiscais.FILTRO_DADOS">
			</div>

			<div class="form-group" style="padding-top: 15px; width: fit-content; padding-right: 10px;">
				<button type="submit" class="btn btn-xs btn-primary btn-filtrar" data-hotkey="alt+f" id="btn-table-filter">
					<span class="glyphicon glyphicon-filter"></span> Filtrar
				</button>
			</div>	
		</div>
	</form>
	

	<!-- <div id="filtro_main" class="table-filter collapse in" aria-expanded="true" 
		 style="margin-bottom: 4px;
				background: rgba(221,221,221,.33);
				padding: 10px 10px 7px;
				border-radius: 5px;
				height:80px;">
		<div class="form-group"
			 style="display: flex;">
			<div class="form-group"
				 style="width: 120px;">										   
				<label>Filtro Estabelecimento</label>
				<input
					min="0"	
					type="number"
					style="width:100px;"
					class="form-control eng"
					ng-change="vm.CADDEOPEINTDOCFiscais.filtro_mestre()"
					ng-model="vm.CADDEOPEINTDOCFiscais.FILTRO_TIPO_ESTABELECIMENTO">
			</div>

			<div class="form-group" 
				 style="padding-left: 12px;
					    width: 120px;">
				<label>Filtro CFOP</label>
				<input
					type="text"
					maxlength="5"
					style="width:100px;"
					id="filtro_cfop"
					class="form-control eng"
					ng-model="vm.CADDEOPEINTDOCFiscais.FILTRO_TIPO_CFOP"
					ng-change="vm.CADDEOPEINTDOCFiscais.filtro_mestre()">
			</div>

			<div style="display: -webkit-inline-box; padding-left: 12px;" class="consulta-conta-filtro"></div>
			
			<div class="form-group"
				 style="padding-left: 15px;">
				<label>Filtro Descrição</label>
				<input 
					type="text"
					style="width: 97% !important;"
					placeholder="Filtragem rápida..."
					class="form-control input-maior" 
					ng-model="vm.CADDEOPEINTDOCFiscais.FILTRO_DADOS">
			</div>

			<div class="form-group"
				 style="width:fit-content;
						height:fit-content;
						padding-left: 15px;">
				<label>Status:</label>
				<div class="form-group">	   
					<input 
						id="clic"
						type="checkbox" 
						ng-true-value="true"
						ng-false-value="false"
						ng-click="vm.CADDEOPEINTDOCFiscais.filtro_mestre()"
						ng-model="vm.CADDEOPEINTDOCFiscais.FILTRO_STATUS_ATIVO;">
					<label for="clic">Ativo</label>
					
					<input 
						id="clic2"
						type="checkbox" 
						ng-true-value="true"
						ng-false-value="false"
						ng-click="vm.CADDEOPEINTDOCFiscais.filtro_mestre()"
						ng-model="vm.CADDEOPEINTDOCFiscais.FILTRO_STATUS_INATIVO">
					<label for="clic2">Inativo</label>
				</div>
			</div>
			
			<div class="form-group"
				 style="width:fit-content;
				   		height:fit-content;
					    padding-left: 12px;">
				<label>Tipo:</label>							
				<div class="form-group">
					<input 
						id="clic3"
						type="checkbox" 
						ng-true-value="true"
						ng-true-value="false"
						ng-click="vm.CADDEOPEINTDOCFiscais.filtro_mestre()"
						ng-model="vm.CADDEOPEINTDOCFiscais.FILTRO_TIPO_ENTRADA">
					<label for="clic3">Entrada</label>
					
					<input 
						id="clic4"
						type="checkbox" 
						ng-true-value="true"
						ng-true-value="false"
						ng-click="vm.CADDEOPEINTDOCFiscais.filtro_mestre()"
						ng-model="vm.CADDEOPEINTDOCFiscais.FILTRO_TIPO_SAIDA">
					<label for="clic4">Saída</label>
				</div>
			</div>
		</div>						   				
	</div> -->
	<div class="form-group" style="margin-top: 10px;">
		<div class="tabela_principal tabela_main ui-resizable" id="tabela_principal" style="height: 350px" ></div>
	
		<!-- <div class="tabela_main ui-resizable" style="height: calc(45vh);">
			<div class="form-group" style="margin-bottom: 4px; width: calc(100%); height: calc(100%);">	
				<div class="table-ec table-scroll" 
					style="width: calc(100%); height: calc(100%);">			
					<table id="tabela_main" class="table table-striped table-bordered table-condensed table-no-break table-middle table-low">
						<thead>
							<tr gc-order-by="vm.CADDEOPEINTDOCFiscais.ORDER_BY">
								<th field="STATUS" style="width: 23px; min-width: 23px;" ttitle="Status<br/>Verde: Ativo | Vermelho: Inativo"></th>                    
								<th field="TIPO_DESCRICAO" style="width: calc(10%);">Tipo</th>
								<th field="CODIGO">Cód.</th>
								<th field="DESCRICAO">Descrição</th>
								<th field="EXIGE_PEDIDO"><span style="writing-mode: vertical-rl; transform: rotate(180deg);" ttitle="Exige Pedido">Exige Ped.</span></th>
								<th field="EXIGE_DUPLICATA"><span style="writing-mode: vertical-rl; transform: rotate(180deg);" ttitle="Exige Duplicata">Exige Dupl.</span></th>
								<th field="GERA_DUPLICATA"><span style="writing-mode: vertical-rl; transform: rotate(180deg);" ttitle="Gera Duplicata">Gera Dupl.</span></th>
								<th field="EXIGE_LOCALIZACAO"><span style="writing-mode: vertical-rl; transform: rotate(180deg);" ttitle="Exige localização de estoque">Exige Local.Est.</span></th>
								<th field="CONTROLE_ESTOQUE"><span style="writing-mode: vertical-rl; transform: rotate(180deg);" ttitle="Atualiza Estoque Físico">Att. Estoque</span></th>
								<th field="CONTROLE_ESTOQUE_EXTERNO"><span style="writing-mode: vertical-rl; transform: rotate(180deg);" ttitle="Atualiza Saldos Externos">Att. Saldos Externos</span></th>
								<th field="CONTROLE_FATURAMENTO"><span style="writing-mode: vertical-rl; transform: rotate(180deg);" ttitle="Controle de Faturamento">Contr. Faturamento</span></th>
								<th field="TRANSFERENCIA"><span style="writing-mode: vertical-rl; transform: rotate(180deg);" ttitle="Controle de Transferência">Contr. Transferência</span></th>
								<th field="EXIGE_NF_REFERENCIA"><span style="writing-mode: vertical-rl; transform: rotate(180deg);" ttitle="Exige Documento de Referência">Exige Doc. Ref.</span></th>
								<th field="EXIGE_OC"><span style="writing-mode: vertical-rl; transform: rotate(180deg);" ttitle="Exige Ordem de Compra">Exige Ord. Compra</span></th>
								<th field="BLOQUEIA_ITEM_OC"><span style="writing-mode: vertical-rl; transform: rotate(180deg);" ttitle="Bloqueia Preço Diferente da OC">Bloq. Preço Dif. da OC</span></th>
								<th field="EXIGE_CUSTO_EXTERNO"><span style="writing-mode: vertical-rl; transform: rotate(180deg);" ttitle="Exige Custo de Produto Vinculado">Exige Custo Prod. Vinc.</span></th>
								<th field="EXIGE_NCM"><span style="writing-mode: vertical-rl; transform: rotate(180deg);" ttitle="Exige Classificação Fiscal (NCM)">Exige Class. Fiscal (NCM)</span></th>
								<th field="SERVICO"><span style="writing-mode: vertical-rl; transform: rotate(180deg);" ttitle="Operação de Serviço Prestado">Oper. Serv. Prestado</span></th>
								<th field="ATUALIZA_CUSTO"><span style="writing-mode: vertical-rl; transform: rotate(180deg);" ttitle="Atualiza Custo Médio">Att. Custo Médio</span></th>
								<th field="CONTROLE_REVISAO"><span style="writing-mode: vertical-rl; transform: rotate(180deg);" ttitle="Atualiza Saldo em Revisão">Att. Saldo em Revisão</span></th>
								<th field="CONTROLE_CONSIGNACAO"><span style="writing-mode: vertical-rl; transform: rotate(180deg);" ttitle="Controle de Venda em Consignação">Contr. Venda Consig.</span></th>
								<th field="CONTROLE_DEVOLUCAO"><span style="writing-mode: vertical-rl; transform: rotate(180deg);" ttitle="Controle de Devoluções">Contr. Devoluções</span></th>
								<th field="ACERTO"><span style="writing-mode: vertical-rl; transform: rotate(180deg);" ttitle="Acerto de Saldo/Inventário">Acerto de Saldo/Inventário</span></th>
							</tr>
						</thead>
						<tbody>
							<tr ng-repeat="item in vm.CADDEOPEINTDOCFiscais.DADOS_RENDER = ( vm.CADDEOPEINTDOCFiscais.DADOS | orderBy : ['CODIGO','DESCRICAO'] | find: {model : vm.CADDEOPEINTDOCFiscais.FILTRO_DADOS ,fields : ['CODIGO','DESCRICAO']})"
								ng-dblclick="vm.CADDEOPEINTDOCFiscais.visualizar()"
								ng-focus="vm.CADDEOPEINTDOCFiscais.SELECTED = item"
								ng-class="{ 'selected' : vm.CADDEOPEINTDOCFiscais.SELECTED == item }"
								tabindex="0"
								ng-if="item.VISIBLE == true">
								<td class="t-status status-@{{ item.STATUS }}">
								</td>
								<td>
									<span>
										@{{ item.TIPO_DESCRICAO }}
									</span>
								</td>
								<td>
									<span>
										@{{ item.CODIGO }}
									</span>
								</td>
								<td>
									<span>
										@{{ item.DESCRICAO }}
									</span>
								</td>
								<td class="t-status status-@{{ item.EXIGE_PEDIDO }}">
								</td>
								<td class="t-status status-@{{ item.EXIGE_DUPLICATA }}">
								</td>
								<td class="t-status status-@{{ item.GERA_DUPLICATA }}">
								</td>
								<td class="t-status status-@{{ item.EXIGE_LOCALIZACAO }}">
								</td>
								<td class="t-status status-@{{ item.CONTROLE_ESTOQUE }}">
								</td>
								<td class="t-status status-@{{ item.CONTROLE_ESTOQUE_EXTERNO }}">
								</td>
								<td class="t-status status-@{{ item.CONTROLE_FATURAMENTO }}">
								</td>
								<td class="t-status status-@{{ item.TRANSFERENCIA }}">
								</td>
								<td class="t-status status-@{{ item.EXIGE_NF_REFERENCIA }}">
								</td>
								<td class="t-status status-@{{ item.EXIGE_OC }}">
								</td>
								<td class="t-status status-@{{ item.BLOQUEIA_ITEM_OC }}">
								</td>
								<td class="t-status status-@{{ item.EXIGE_CUSTO_EXTERNO }}">
								</td>
								<td class="t-status status-@{{ item.EXIGE_NCM }}">
								</td>
								<td class="t-status status-@{{ item.SERVICO }}">
								</td>
								<td class="t-status status-@{{ item.ATUALIZA_CUSTO }}">
								</td>
								<td class="t-status status-@{{ item.CONTROLE_REVISAO }}">
								</td>
								<td class="t-status status-@{{ item.CONTROLE_CONSIGNACAO }}">
								</td>
								<td class="t-status status-@{{ item.CONTROLE_DEVOLUCAO }}">
								</td>
								<td class="t-status status-@{{ item.DESC_ACERTO }}">
								</td>
							
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div> -->
		
		<div style="height: 350px; margin-top: 35px;" >
			<div>
				<ul id="tab" class="nav nav-tabs" role="tablist"> 
					
					<li role="presentation" class="active tab-detalhamento">
						<a href="#tab1-container" data-hotkey="alt+1" id="tab1-tab" role="tab" data-toggle="tab" aria-controls="tab1-container" aria-expanded="true">
							Contabilização
							<span class="btn btn-xs btn-default glyphicon glyphicon-refresh"></span>
						</a>
					</li>
					<li role="presentation" class="tab-detalhamento">
						<a href="#tab3-container" data-hotkey="alt+2" id="tab3-tab" role="tab" data-toggle="tab" aria-controls="tab3-container" aria-expanded="false">
							Vínculos CFOP
							<span class="btn btn-xs btn-default glyphicon glyphicon-refresh"></span>
						</a>
					</li>
					<li role="presentation" class="tab-detalhamento">
						<a href="#tab2-container" data-hotkey="alt+3" id="tab2-tab" role="tab" data-toggle="tab" aria-controls="tab2-container" aria-expanded="false">
							Observações
							<span class="btn btn-xs btn-default glyphicon glyphicon-refresh"></span>
						</a>
					</li>
				</ul>
			</div>

			<div id="tab-content" class="tab-content" style="height: calc(100%);">
				<div role="tabpanel" class="tab-pane active in" id="tab1-container" aria-labelledby="tab1-tab" style="height: calc(94%);">
					<div class="tabela_int_cont_principal tabela_sec ui-resizable" id="tabela_int_cont_principal" style="height: 210px;"></div>
					
					<!-- <div class="table-ec table-scroll" style="width: 100%;height: calc(100%);">
														
						<table class="table table-striped table-bordered table-condensed table-no-break table-middle table-low">
							<thead>
								<tr gc-order-by="vm.CADDEOPEINTDOCFiscais.ORDER_BY">
									<th field="STATUS" style="width: 23px; min-width: 23px;" ttitle="Status<br/>Verde: Ativo | Vermelho: Inativo"></th>                    
									<th field="ESTABELECIMENTO_CODIGO">Estab.</th>
									<th field="CONTA_DEBITO" colspan="2">Conta Contábil Débito</th>
									<th field="CONTA_CREDITO" colspan="2">Conta Contábil Crédito</th>
								</tr>
							</thead>
							<tbody>
								<tr ng-repeat="item in vm.CADDEOPEINTDOCFiscais.DADOS_RENDER_CONTABIL = ( vm.CADDEOPEINTDOCFiscais.SELECTED.CONTABIL) track by $index"
									ng-class="{ 'selected' : vm.CADDEOPEINTDOCFiscais.SELECTED.CONTABIL == item }"
									tabindex="0">
									<td class="t-status status-@{{ item.STATUS }}">
									</td>
									<td>
										<span>
											@{{ item.ESTABELECIMENTO_CODIGO || 0 | lpad: [4,0] }}
										</span>
									</td>
									<td>
										<span>
											@{{ item.FCONTA_DEBITO }}
										</span>
									</td>
									<td>
										<span>
											@{{ item.CONTA_DEBITO_DESCRICAO }}
										</span>
									</td>
									<td>
										<span>
											@{{ item.FCONTA_CREDITO }}
										</span>
									</td>
									<td>
										<span>
											@{{ item.CONTA_CREDITO_DESCRICAO }}
										</span>
									</td>
								</tr>
							</tbody>
						</table>
					</div> -->

				</div>
				
				<div role="tabpanel" class="tab-pane" id="tab2-container"  ng-if="!vm.CADDEOPEINTDOCFiscais.INCLUINDO" aria-labelledby="tab2-tab" style="height: 94%; overflow: auto;">
					<div class="form-group">
						<textarea
							style="resize: none;
									margin: 0px;
									border-radius: 4pt;" 
							cols="100"
							rows="6"
							class="form-control" 
							ng-model="vm.CADDEOPEINTDOCFiscais.SELECTED.OBSERVACAO"
							readonly="readonly"
							form-validate="true">
						</textarea>
					</div>
				</div>

				<div role="tabpanel" class="tab-pane" id="tab3-container" name="quiosque1" aria-labelledby="tab1-tab" style="height: 94%;">
					<div class="tabela_cfop_principal tabela_sec ui-resizable" id="tabela_cfop_principal" style="height: 210px;"></div>
					
					<!-- <div class="table-ec table-scroll" style="width: 100%;">
														
						<table class="table table-striped table-bordered table-condensed table-no-break table-middle table-low">
							<thead>
								<tr gc-order-by="vm.CADDEOPEINTDOCFiscais.ORDER_BY_CFOP">
									<th field="CFOP_CODIGO">CFOP</th>
									<th field="ESTABELECIMENTO_CODIGO">Est.</th>
									<th field="UF">Destino</th>
									<th field="ICMS">%Icms</th>
									<th field="TRIBUTACAO_IPI">CST Ipi</th>
									<th field="TRIBUTACAO_PIS">CST Pis</th>
									<th field="TRIBUTACAO_COFINS">CST Cofins</th>
									<th field="MODALIDADE_ST">Mod.Icms ST.</th>
									<th field="ALIQUOTA_ST">% Icms ST.</th>
									<th field="FAMILIA">Família(s)</th>
								</tr>
							</thead>
							<tbody>
								<tr ng-repeat="item in vm.CADDEOPEINTDOCFiscais.DADOS_MAIN_CFOP = ( vm.CADDEOPEINTDOCFiscais.SELECTED.CFOP) track by $index"
									ng-class="{ 'selected' : vm.CADDEOPEINTDOCFiscais.SELECTED.CFOP == item }"
									tabindex="0">
									<td class="t-status status-@{{ item.STATUS }}">
									</td>
									<td>
										<span>
											@{{ item.CFOP_CODIGO }}
										</span>
									</td>
									<td>
										<span>
											@{{ item.ESTABELECIMENTO_CODIGO || 0 | lpad: [4,0] }}
										</span>
									</td>
									<td>
										<span>
											@{{ item.UF }}
										</span>
									</td>
									<td>
										<span>
											@{{ item.ICMS }}
										</span>
									</td>
									<td>
										<span>
											@{{ item.TRIBUTACAO_IPI }}
										</span>
									</td>									
									<td>
										<span>
											@{{ item.TRIBUTACAO_PIS }}
										</span>
									</td>
									<td>
										<span>
											@{{ item.TRIBUTACAO_COFINS }}
										</span>
									</td>									
									<td>
										<span>
											@{{ item.MODALIDADE_ST }}
										</span>
									</td>									
									<td>
										<span>
											@{{ item.ALIQUOTA_ST }}
										</span>
									</td>								
									<td>
										<span>
											@{{ item.DESC_FAMILIA }}
										</span>
									</td>
								</tr>
							</tbody>
						</table>
					</div> -->
				</div>
			</div>
		</div>
	</div>

	@include($menu.'.modal.CADDEOPEINTDOCFiscais')
	@include($menu.'.modal.CADDEOPEINTDOCFiscaisIntContabil')
	@include($menu.'.modal.CADDEOPEINTDOCFiscaisVinculoCFOP')
	@include($menu.'.modal.CADDEOPEINTDOCFiscaisItens')
	@include($menu.'.modal.CADDEOPEINTDOCFiscaisItensConfirm')
	

	<!-- Modal -->
	<div class="modal fade" id="Modal_Copia" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
		<div class="modal-dialog modal-dialog-centered" role="document">
			<div class="modal-content">
			<div class="modal-header">
				<h3 class="modal-title" id="exampleModalLongTitle">Copiar Registro</h3>
				<!--<button type="button" class="close" data-dismiss="modal" aria-label="Close">
				<span aria-hidden="true">&times;</span>
				</button>-->
			</div>
			<div class="modal-body">
				<label>Digite o Código Reduzido da nova Operação:</label>
				<br>  
				<input 
					id="copia_cod" 
					class="form-control input-menor icms" 
					type="text" 
					maxlength="3"
					autofocus/>
					<br>  
				<!-- <label>Descrição:</label>
					<br> 
				<input 
					id="copia_desc" 
					type="text" 
					class="form-control input-maior" 
					maxlength="30">
			</div> -->
			<div class="modal-footer">
				<button type="button" class="btn btn-success incluir" data-hotkey="f1" ng-click="vm.CADDEOPEINTDOCFiscais.copiar_operacao()"> <span class="glyphicon glyphicon-ok"></span> Confirmar</button>
				<button type="button" class="btn btn-danger cancelar btn-cancelar" data-hotkey="esc" ng-click="vm.CADDEOPEINTDOCFiscais.apagar_copia()"><span class="glyphicon glyphicon-ban-circle"></span> Cancelar </button>
			</div>
			</div>
		</div>
	</div>

</div>
@endsection

@section('script')
    <script src="{{ elixir('assets/js/_21110.js') }}"></script>
@append