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

@section('modal-header-left')
<h4 class="modal-title">
	<span>@{{ vm.Copinhos.DESCRICAO_DETALHAMENTO }}</span>	
</h4>
@overwrite

@section('modal-header-right')
	<button ng-if="!vm.Copinhos.ALTERANDO" type="button" class="btn btn-default btn-fechar-modal btn-voltar" ng-click="vm.Copinhos.fecharModal()" data-hotkey="esc">
        <span class="glyphicon glyphicon-chevron-left"></span> Voltar
    </button>	
@overwrite

@section('modal-body')

	<div style="height: calc(100vh - 180px);">
		<ul id="tab" class="nav nav-tabs" role="tablist"> 
			<li role="presentation" class="active tab-detalhamento">
				<a ng-click="vm.Copinhos.AbrirAba(1);" href="#tab1-container" id="tab1-tab" data-hotkey="alt+1" role="tab" data-toggle="tab" aria-controls="tab1-container" aria-expanded="true">
					Pedidos	
				</a>
			</li>

			<li role="presentation" class="tab-detalhamento">
				<a ng-click="vm.Copinhos.AbrirAba(4);" href="#tab4-container" id="tab4-tab" data-hotkey="alt+2" role="tab" data-toggle="tab" aria-controls="tab4-container" aria-expanded="true">
					Remessas	
				</a>
			</li>

			<li role="presentation" class="tab-detalhamento">
				<a ng-click="vm.Copinhos.AbrirAba(2);" href="#tab2-container" id="tab2-tab" data-hotkey="alt+3" role="tab" data-toggle="tab" aria-controls="tab2-container" aria-expanded="false">
					Sku
				</a>
			</li>

			<li role="presentation" class="tab-detalhamento">
				<a ng-click="vm.Copinhos.AbrirAba(3);" href="#tab3-container" id="tab3-tab" data-hotkey="alt+4" role="tab" data-toggle="tab" aria-controls="tab3-container" aria-expanded="false">
					Modelos 
				</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="tabela_pedidos" id="tabela_pedidos"></div> 
			</div>

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

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

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

		</div>

	</div>
	
</div>
@overwrite