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

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

@section('modal-header-left')

	<h4 class="modal-title">
		<span>12201 - Importação de Itens por Arquivo CSV</span>
	</h4>

@overwrite

@section('modal-header-right')

	<button ng-if="vm.ImportacaoItensByArquivo.ALTERANDO && vm.ImportacaoItensByArquivo.TIPO_ADD < 3" type="submit" class="btn btn-success" data-hotkey="f1">
        <span class="glyphicon glyphicon-ok"></span> Importar
    </button>
	
	<button ng-if="vm.ImportacaoItensByArquivo.ALTERANDO && vm.ImportacaoItensByArquivo.TIPO_ADD == 3" type="submit" class="btn btn-success" data-hotkey="f1">
        <span class="glyphicon glyphicon-ok"></span> Confirmar
    </button>
	
	<button ng-if="vm.ImportacaoItensByArquivo.ALTERANDO" ng-click="vm.ImportacaoItensByArquivo.cancelar()" type="button" class="btn btn-danger btn-cancelar" data-hotkey="esc">
        <span class="glyphicon glyphicon-ban-circle"></span> Cancelar
    </button>
	
	<button ng-disabled="{{ userMenu($menu)->ALTERAR }} == 0 || (vm.ImportacaoItensByArquivo.TIPO_ADD == 2 && vm.DocumentosFiscaisSaida.ALTERANDO == false)" ng-if="!vm.ImportacaoItensByArquivo.ALTERANDO" ng-click="vm.ImportacaoItensByArquivo.alterar()" type="button" class="btn btn-primary" data-hotkey="f9">
        <span class="glyphicon glyphicon-edit"></span> Alterar
    </button>   
	
	<button ng-disabled="{{ userMenu($menu)->EXCLUIR }} == 0 || (vm.ImportacaoItensByArquivo.TIPO_ADD == 2 && vm.DocumentosFiscaisSaida.ALTERANDO == false)" ng-if="!vm.ImportacaoItensByArquivo.ALTERANDO" ng-click="vm.ImportacaoItensByArquivo.excluir()" type="button" class="btn btn-danger" data-hotkey="f12">
        <span class="glyphicon glyphicon-trash"></span> Excluir
    </button>
	
	<button ng-if="!vm.ImportacaoItensByArquivo.ALTERANDO" type="button" class="btn btn-default btn-fechar-modal btn-voltar" ng-click="vm.ImportacaoItensByArquivo.fecharModal()" data-hotkey="esc">
		<span class="glyphicon glyphicon-chevron-left"></span> Voltar
    </button>	

@overwrite

@section('modal-body')
<div style="height: calc(100vh - 155px);">
<!--<span class="btn btn-xs btn-default glyphicon glyphicon-refresh"></span>-->
<!--<ul id="tab" class="nav nav-tabs" role="tablist"> 
		<li role="presentation" class="active tab-detalhamento">
			<a href="#tab1-container" id="tab1-tab" data-hotkey="alt+1" role="tab" data-toggle="tab" aria-controls="tab1-container" aria-expanded="true">
				1
			</a>
		</li>

		<li role="presentation" class="tab-detalhamento" ng-if="!vm.ImportacaoItensByArquivo.ALTERANDO">
			<a href="#tab2-container" id="tab2-tab" data-hotkey="alt+2" role="tab" data-toggle="tab" aria-controls="tab2-container" aria-expanded="false">
				2
			</a>
		</li>

		<li role="presentation" class="tab-detalhamento"  ng-if="!vm.ImportacaoItensByArquivo.ALTERANDO">
			<a href="#tab3-container" id="tab3-tab" data-hotkey="alt+3" role="tab" data-toggle="tab" aria-controls="tab3-container" aria-expanded="false">
				3
			</a>
		</li>
	</ul>

	<div id="tab-content" class="tab-content"  style="height: calc(100% - 45px);">
		
		<div role="tabpanel" class="tab-pane active in" id="tab1-container" name="" aria-labelledby="tab1-tab" style="height: 100%; overflow:auto;">
			<div class="row">
		
			</div>
		</div>

		<div role="tabpanel" class="tab-pane" id="tab2-container" name="" aria-labelledby="tab2-tab" style="height: 100%; overflow:auto;">
			<div class="row">

			</div>
		</div>

		<div role="tabpanel" class="tab-pane" id="tab3-container" name="" aria-labelledby="tab3-tab" style="height: 100%; overflow:auto;">
			<div class="row">

			</div>
		</div>

	</div>
	
	-->
	
    <div class="row">


		<!-- <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;"> -->
			
			<br>
			
			<div class="form-group">
				<label>Cliente:<span
				class="glyphicon glyphicon-question-sign ng-scope"
				data-toggle="popover"
				data-placement="right"
				title=""
				data-element-content="#info-1"
				on-finish-render="bs-init"
				data-original-title="Links"
				style=""></span></label>
				<input 
					type="text"
					class="form-control" 
					style="width: 387px; margin-right: 10px;"
					required
					value="@{{vm.ConsultaCliente.item.dados.DESC_ID}} - @{{vm.ConsultaCliente.item.dados.RAZAOSOCIAL}}"
					ng-disabled="true">
			</div>

			<div id="info-1" style="display: none">
				<div class="origem-container">
					<table class="table table-striped table-bordered">
						<thead>
							<tr>
								<th class="text-left"></th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td class="text-left"><a tabindex="-1" href="{{ url('') }}/_12360" target="_blank" rel="noopener noreferrer">12360 - Cadastro de Clientes</a></td>
							</tr>
							<tr>
								<td class="text-left"><a tabindex="-1" href="{{ url('') }}/_14080" target="_blank" rel="noopener noreferrer">14080 - Cadastro de Fornecedores</a></td>
							</tr>
							<tr>
								<td class="text-left"><a tabindex="-1" href="{{ url('') }}/_12350" target="_blank" rel="noopener noreferrer">12350 - Cadastro de Representantes</a></td>
							</tr>
							<tr>
								<td class="text-left"><a tabindex="-1" href="{{ url('') }}/_14011" target="_blank" rel="noopener noreferrer">14011 - Cadastro de Transportadoras</a></td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		<!-- 
			<div class="form-group">
				<input id="checkBoxCabecalhoArquivo" 
					type="checkbox" 
					style="margin-top: -2px;"
					ng-checked="vm.ImportacaoItensByArquivo.SELECTED.CABECALHO_ARQUIVO == '1'" 
					ng-model="vm.ImportacaoItensByArquivo.SELECTED.CABECALHO_ARQUIVO" 
					ng-change="vm.ImportacaoItensByArquivo.changeCabecalhoFile();"
					ng-true-value="'1'" 
					ng-false-value="'0'">
				<label for="checkBoxCabecalhoArquivo" style="font-weight: bolder; margin-left: 3px;">Cabeçalho do Arquivo</label>			
			</div> -->

			<div class="form-group">
				<label for="exampleFormControlFile1">Arquivo CSV</label>
				<input type="file" class="form-control-file" id="exampleFormControlFile1" ngf-select="vm.ImportacaoItensByArquivo.selectedFile($file)">
			</div>
    </div>

	<fieldset style="margin-top: 20px;" ng-show="vm.ImportacaoItensByArquivo.SELECTED.HABILITA_ROWS == true">
		<legend>Definir Colunas do CSV</legend>
		
		<div class="row">
			<div class="container-inner">
				<div class="inner-left">
					<h4>Colunas do CSV Importado</h4>
					<div class="box-site principal inner-content">
						<ul class="sup-box item-list" ng-repeat="item in vm.ImportacaoItensByArquivo.SELECTED.ARRAY_CABECALHO_CSV track by $index">
							<li ng-bind="item.HEADER" id="@{{item.INDEX}}"></li>
						</ul>
					</div>
				</div>
				<!-- <ul class="box-site">
					Colunas do CSV Importado
					<ul class="sup-box" ng-repeat="item in vm.ImportacaoItensByArquivo.SELECTED.ARRAY_CABECALHO_CSV track by $index">
						<li ng-bind="item.HEADER">Test 1</li>
					</ul>
				</ul> -->

				<div class="inner-right">
					<h4>Colunas do CSV para Importação</h4>

					<div style="margin-top: 22px;">
						<div class="labelOrdemCsv produto required">1ª - EAN</div>
						<div class="box-site produto inner-content colunas">
							
						</div>
					</div>

					<div style="margin-top: 15px;">
						<div class="labelOrdemCsv quantidade required">2ª - Quantidade</div>
						<div class="box-site quantidade inner-content colunas">
						
						</div>
					</div>
					
					<!-- 
					<div style="margin-top: 15px;">
						<div class="labelOrdemCsv tamanho" ttitle="Obrigatório para Produtos com Grade">3ª - Tamanho</div>
						<div class="box-site tamanho inner-content colunas">
							
						</div>
					</div>

					<div style="margin-top: 15px;">
					<div class="labelOrdemCsv localizacao">4ª - Localização</div>
						<div class="box-site localizacao inner-content colunas">
							
						</div>
					</div> -->

					<div style="margin-top: 15px;">
						<div class="labelOrdemCsv valorUnitario" ttitle="Valor Unitário">3ª - Valor Unit.</div>
						<div class="box-site valorUnitario inner-content colunas">
							
						</div>
					</div>
<!-- 
					<div style="margin-top: 15px;">
						<div class="labelOrdemCsv ncm" ttitle="Nomenclatura Comum do Mercosul">6ª - NCM</div>
						<div class="box-site ncm inner-content colunas">
							
						</div>
					</div> -->

					
					<!-- <div class="labelOrdemCsv quantidade required">2ª - Quantidade</div>
					<div class="labelOrdemCsv tamanho" ttitle="Obrigatório para Produtos com Grade">3ª - Tamanho</div>
					<div class="labelOrdemCsv localizacao">4ª - Localização</div>
					<div class="labelOrdemCsv valorUnitario" ttitle="Valor Unitário">5ª - Valor Unit.</div>
					<div class="labelOrdemCsv ncm" ttitle="Nomenclatura Comum do Mercosul">6ª - NCM</div>
					<div class="box-site inner-content">
						<ul class="sup-box item-list">
							<li ng-bind="item.HEADER"></li>
						</ul> 
					</div> -->
				</div>
			</div>
		</div>
	</fieldset>

	
		<fieldset ng-show="vm.ImportacaoItensByArquivo.SELECTED.HABILITA_ROWS == true">
			<legend>Prévia do Arquivo</legend>
			<div class="row">
				<span style="font-weight: bold;">Quantidade de Registros Total: @{{vm.ImportacaoItensByArquivo.SELECTED.QUANTIDADE_TOTAL_REGISTROS}}</span>
				<!-- <div class="resize table-detalhe" style="height: 195px;"> -->
					<div class="table-ec table-scroll" style="height: calc(100vh - 725px); min-height: 195px; width: 100%; margin-top: 20px;">
						<table class="table table-striped table-bordered table-condensed table-no-break table-middle table-low">
							<thead>
								<tr>
									<th ng-repeat="arr in vm.ImportacaoItensByArquivo.SELECTED.ARRAY_CABECALHO_CSV track by $index">@{{arr.HEADER}}</th>
								</tr>
							</thead>
							<tbody>
								<tr ng-repeat="item in vm.ImportacaoItensByArquivo.SELECTED.ARRAY_DADOS_CSV track by $index" tabindex="0" ng-if="$index < 10">
									<td class="" ng-repeat="arr in item track by $index">@{{arr}}</td>
								</tr>
							</tbody>
						</table>
					</div>
				<!-- </div> -->
			</div>
		</fieldset>
	

</div>
</form>

@overwrite