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

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

@section('modal-header-left')

<h4 class="modal-title">
	<span ng-if="!vm.AgrupamentoPedRep.ALTERANDO">{{ Lang::get('ppcp/_22690.titulo-exibir') }}</span>
	<span ng-if="vm.AgrupamentoPedRep.INCLUINDO">{{ Lang::get('ppcp/_22690.titulo-incluir') }}</span>
	<span ng-if="vm.AgrupamentoPedRep.COPIANDO">{{ Lang::get('ppcp/_22690.titulo-copiar') }}</span>
	<span ng-if="vm.AgrupamentoPedRep.ALTERANDO == true && vm.AgrupamentoPedRep.INCLUINDO == false && vm.AgrupamentoPedRep.COPIANDO == false">{{ Lang::get('ppcp/_22690.titulo-alterar') }}</span>	
</h4>

@overwrite

@section('modal-header-right')

	<button ng-if="vm.AgrupamentoPedRep.ALTERANDO" type="submit" class="btn btn-success" data-hotkey="f1">
        <span class="glyphicon glyphicon-ok"></span> Gravar
    </button>
	
	<button ng-if="vm.AgrupamentoPedRep.ALTERANDO" ng-click="vm.AgrupamentoPedRep.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)->INCLUIR }}" ng-if="!vm.AgrupamentoPedRep.ALTERANDO" ng-click="vm.AgrupamentoPedRep.incluirNovo()" type="button" class="btn btn-primary" data-hotkey="f7">
        <span class="glyphicon glyphicon-plus"></span> Incluir Novo Registro 
	</button> 

	<button ng-disabled="!{{ userMenu($menu)->INCLUIR }}" ng-if="!vm.AgrupamentoPedRep.ALTERANDO" ng-click="vm.AgrupamentoPedRep.updateRegistro()" type="button" class="btn btn-warning" data-hotkey="f8">
        <span class="glyphicon glyphicon-refresh"></span> Atualizar Registro 
	</button> 
	
<!-- 	
	<button ng-disabled="!{{ userMenu($menu)->INCLUIR }}" ng-if="!vm.AgrupamentoPedRep.ALTERANDO" ng-click="vm.AgrupamentoPedRep.copiar()" type="button" class="btn btn-primary" data-hotkey="f8">
        <span class="fa fa-files-o"></span> Copiar Registro
    </button>    -->
	
	<button ng-disabled="{{ userMenu($menu)->ALTERAR }} == 0" ng-if="!vm.AgrupamentoPedRep.ALTERANDO" ng-click="vm.AgrupamentoPedRep.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"  ng-if="!vm.AgrupamentoPedRep.ALTERANDO" ng-click="vm.AgrupamentoPedRep.excluir()" type="button" class="btn btn-danger" data-hotkey="f12">
        <span class="glyphicon glyphicon-trash"></span> Excluir
    </button>
	
	<button ng-if="!vm.AgrupamentoPedRep.ALTERANDO" data-consulta-historico data-tabela="TBAGRUPAMENTO" data-tabela-id="@{{ vm.AgrupamentoPedRep.SELECTED.ID }}" type="button" class="btn gerar-historico" data-hotkey="alt+h">
        <span class="glyphicon glyphicon-time"></span> {{ Lang::get('master.historico') }}
    </button>
	
	<!-- <button ng-if="!vm.AgrupamentoPedRep.ALTERANDO" data-consulta-arquivos data-tabela="TBAGRUPAMENTO" data-tabela-id="@{{ vm.AgrupamentoPedRep.SELECTED.ID }}" type="button" class="btn  btn-info" data-hotkey="alt+a">
        <span class="glyphicon glyphicon-file"></span> {{ Lang::get('master.arquivos') }}
    </button> -->
	
	<button ng-if="!vm.AgrupamentoPedRep.ALTERANDO" type="button" class="btn btn-default btn-fechar-modal btn-voltar" ng-click="vm.AgrupamentoPedRep.fecharModal()" data-hotkey="esc">
        <span class="glyphicon glyphicon-chevron-left"></span> Voltar
    </button>	

@overwrite

@section('modal-header-end')

	<!-- PARA USAR OS BOTÕES DE AVANÇAR E RETROCEDER BASTA DESCOMENTAR AS LINHAS ABAIXO -->
	
	<!-- <button ng-disabled="{{ userMenu($menu)->INCLUIR }} == 0" style="height: 31px;" ng-click="vm.AgrupamentoPedRep.previousRecord()" ng-if="!vm.AgrupamentoPedRep.ALTERANDO" type="button" class="btn btn-default">
		<span class="glyphicon glyphicon-chevron-left"></span>
	</button>

	<button ng-disabled="{{ userMenu($menu)->INCLUIR }} == 0" style="height: 31px;" ng-click="vm.AgrupamentoPedRep.nextRecord()" ng-if="!vm.AgrupamentoPedRep.ALTERANDO" type="button" class="btn btn-default">
		<span class="glyphicon glyphicon-chevron-right"></span>
	</button> -->
	
@overwrite

@section('modal-body')
<div style="height: calc(100vh - 160px);">
	<!--<span class="btn btn-xs btn-default glyphicon glyphicon-refresh"></span>-->
	
    <div class="row">
	
		<div class="form-group">
            <label>ID:</label>
            <input 
                type="text"
                class="form-control input-menor"
				ng-model="vm.AgrupamentoPedRep.SELECTED.DESC_ID"
                readonly="readonly">
        </div>
		
        <div class="form-group">
            <label>Descrição:</label>
            <input 
                type="text"
                class="form-control input-maior" 
				required
				maxlength="50"
                ng-model="vm.AgrupamentoPedRep.SELECTED.DESCRICAO"
                ng-readonly="!vm.AgrupamentoPedRep.ALTERANDO">
		</div>
		
		<div style="display: -webkit-inline-box;" class="consulta-estab"></div>

		<div style="display: -webkit-inline-box;" class="consulta-localizacao"></div>

		<div style="display: -webkit-inline-box;" class="consulta-gp"></div>

		<div class="form-group">
			<label>Data Inicial:</label>
			<input 
				type="date"
				id="dataInicial"
				class="form-control input-medio" 
				required
				ng-atalho
				ng-model="vm.AgrupamentoPedRep.SELECTED.DATA_INICIAL"
				ng-readonly="!vm.AgrupamentoPedRep.ALTERANDO">
		</div>
		
		<div class="form-group">
			<label>Data Final:</label>
			<input 
				type="date"
				id="dataFinal"
				class="form-control input-medio" 
				required
				ng-atalho
				ng-model="vm.AgrupamentoPedRep.SELECTED.DATA_FINAL"
				ng-readonly="!vm.AgrupamentoPedRep.ALTERANDO">
		</div>
	
    </div>
		
	<fieldset ng-show="(!vm.AgrupamentoPedRep.ALTERANDO || vm.AgrupamentoPedRepItens.TIPO_ADD == 2) && vm.AgrupamentoPedRep.habilita_itens == true" style="margin-top: 10px;">
		<legend></legend>
		<ul id="tab" class="nav nav-tabs" role="tablist"> 
			
			<!-- <li role="presentation" class="tab-detalhamento" ng-if="!vm.AgrupamentoPedRep.ALTERANDO">
				<a href="#tab2-container" id="tab2-tab" data-hotkey="alt+2" role="tab" data-toggle="tab" aria-controls="tab2-container" aria-expanded="false">
					Produtos Acabados
				</a>
			</li>
			 -->
			<li role="presentation" class="active tab-detalhamento" ng-show="!vm.AgrupamentoPedRep.ALTERANDO">
				<a href="#tab1-container" id="tab1-tab" data-hotkey="alt+1" role="tab" data-toggle="tab" aria-controls="tab1-container" aria-expanded="false">
					Dashboard
				</a>
			</li>

			<li role="presentation" class="tab-detalhamento">
				<a href="#tab2-container" id="tab2-tab" data-hotkey="alt+2" role="tab" data-toggle="tab" aria-controls="tab2-container" aria-expanded="true">
					Capacidades Produtivas
					
				</a>
			</li>

		</ul>

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


					<div style="margin-bottom: 10px;">

						

						<div class="row" style="margin-top: 25px !important;">
							<div class="col-md-6">
								<span class="capacidadeUP">Capacidade por Unidades Produtivas</span>

								<ul class="list-inline" style="display: inline-block !important; float: right !important; margin: 0 !important;">
									<li>
										<button 
											type="button" 
											class="btn btn-primary btn-incluir" 
											data-hotkey="f6"
											ng-disabled="!{{ userMenu($menu)->INCLUIR }}" 
											ng-click="vm.AgrupamentoPedRepItens.gerarCP()">
											<span class="glyphicon glyphicon-plus"></span> Gerar
										</button>
									</li>
									<li>
										<button 
											type="button" 
											class="btn btn-danger btn-incluir" 
											data-hotkey="f7"
											ng-disabled="!{{ userMenu($menu)->INCLUIR }}" 
											ng-click="vm.AgrupamentoPedRepItens.updateCP()"
											ttitle="Utilizar essa funcionalidade em caso de alteração no calendário de produção">
											<span class="glyphicon glyphicon-refresh"></span> Reprocessar
										</button>
									</li>
								</ul>
								<div class="tabela_secundaria" id="tabela_secundaria" style="margin-top: 20px;"></div>
							</div>
							<div class="col-md-6">
								<span class="capacidadeFerramenta">Capacidade por Ferramentas</span>
								<div class="tabela_ferramentas" id="tabela_ferramentas"  style="margin-top: 20px;"></div>
							</div>
						</div>
					</div>
				</div>
			</div>

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

					<div style="margin-bottom: 10px;">
						<ul class="list-inline">
							<li>
								<button 
									type="button" 
									class="btn btn-primary btn-incluir" 
									data-hotkey="f6"
									ng-disabled="!{{ userMenu($menu)->INCLUIR }}" 
									ng-click="vm.AgrupamentoPedRepProdAcabado.incluir()">
									<span class="glyphicon glyphicon-plus"></span> Incluir
								</button>
							</li>
						</ul>

						<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>Tipo:</label>
								<div class="input-group">
									<select 
										name="repeatSelect" 
										id="repeatSelect"  
										ng-model="vm.AgrupamentoPedRepProdAcabado.FILTRO_TIPO">
										<option value="">TODOS</option>
										<option value="P">PEDIDO</option>
										<option value="R">REPOSIÇÃO</option>
										<option value="M">MANUAL</option>
									</select>
								</div>
							</div>

							<div class="form-group" style="padding-top: 15px; min-width: 590px;">
								<input type="text" style="width: 100% !important; min-width: 170px;"
									placeholder="Filtragem por modelo, cor"
									class="form-control input-maior filter_main_produto_acabado" 
									ng-model="vm.AgrupamentoPedRepProdAcabado.FILTRO_DADOS">
							</div>

							<div class="form-group" style="padding-top: 12px; width: fit-content; padding-right: 10px;">
								<button type="button" class="btn btn-xs btn-primary btn-filtrar"
									data-hotkey="alt+f" id="btn-table-filter-produto-acabado" ng-click="vm.AgrupamentoPedRepProdAcabado.consultar(1)">
									<span class="glyphicon glyphicon-filter"></span> Filtrar
								</button>
							</div>	
						</div>

						<div class="tabela_produto_acabado" id="tabela_produto_acabado"></div>
					</div>

				</div>
			</div>

			<div role="tabpanel" class="tab-pane active in" id="tab1-container" name="" aria-labelledby="tab3-tab" style="height: 100%; overflow:auto;">
				<!-- <small style="font-weight: bold; display: block; margin-bottom: 5px; margin-top: 5px;">Total do Agrupamento @{{vm.AgrupamentoPedRep.SELECTED.DESC_AGRUPAMENTO}} - @{{vm.AgrupamentoPedRep.SELECTED.PROGRESSO | number: 2}}%</small>
				<div class="progress progress-striped">
					<div role="progressbar" style="width: @{{vm.AgrupamentoPedRep.SELECTED.PROGRESSO}}%;" class="progress-bar progress-bar-success"  ng-class="{'progress-bar-danger': vm.AgrupamentoPedRep.SELECTED.PROGRESSO > 100}">
					</div>
				</div> -->

			

				<div class="row" style="margin-top: 2% !important;">
					<div style="width: 260px; display: inline-block; text-align: center;" ng-repeat="item in vm.AgrupamentoPedRepItens.DADOS track by $index" ng-dblclick="vm.AgrupamentoPedRepItens.detalhamentoItem(item, $index);">
						<!-- <div class="percentuais">
							<div>100</div>
							<div>90</div>
							<div>80</div>
							<div>70</div>
							<div>60</div>
							<div>50</div>
							<div>40</div>
							<div>30</div>
							<div>20</div>
							<div>10</div>
						</div> -->

						<div style="border-left: 1px solid #e2cece; border-bottom: 1px solid #e2cece; margin-bottom: 10px; background-image: url(assets/images/back_grafic.jpg); background-size: 23.6px;">

							<div class="progress progress-striped vertical">
								
								<div role="progressbar" style="height: @{{item.PERCENTUAL_UTILIZADO}}%;" class="progress-bar progress-bar-danger">
									<span style="font-weight: bold;" ng-class="{'percentualMenor': item.PERCENTUAL_UTILIZADO < 10}">@{{item.PERCENTUAL_UTILIZADO | number: 2}}%</span>
								</div>

							</div>
						</div>

						<legend class="legendUP" ng-class="{'legendUP100': item.PERCENTUAL_UTILIZADO >= 100}">@{{item.UP_DESCRICAO}}</legend>

						<div class="legenda_dash" style="display: inline-grid;">
							<table id="tabelaFooterLegend">
								<tbody>
									<tr>
										<td><span class="capProdutiva">Cap.Produtiva:</span>	</td>
										<td><span class="capProdutiva">@{{item.CAP_PRODUTIVA | number: 0}} min</span>	</td>
									</tr>
									<tr>
										<td><span class="utilizado">Utilizado:</span>	</td>
										<td><span class="utilizado">@{{item.UTILIZADO | number: 0}} min</span>	</td>
									</tr>
									<tr>
										<td><span class="saldo">Saldo:</span>	</td>
										<td><span class="saldo">@{{item.SALDO | number: 0}} min</span>	</td>
									</tr>
									<tr>
										<td><span>Excedente:</span>	</td>
										<td><span>@{{item.EXCEDENTE | number: 0}} min</span>	</td>
									</tr>
									<tr>
										<td><span style="color: blue !important;">Programado:</span>	</td>
										<td><span style="color: blue !important;">@{{item.QUANTIDADE_PROGRAMADA | number: 0}}</span>	</td>
									</tr>
									<tr>
										<td><span style="color: blue !important;">Produzido:</span>	</td>
										<td><span style="color: blue !important;">@{{item.QUANTIDADE_PRODUZIDA | number: 0}}</span>	</td>
									</tr>
									<tr ng-if="item.QTD_PECAS_APROX > 0">
										<td><span style="color: #ff00ef !important">Qtd.Peças:</span>	</td>
										<td><span style="color: #ff00ef !important;">&cong;&nbsp;@{{item.QTD_PECAS_APROX | number: 0}}</span>	</td>
									</tr>
									<tr>
										<td><span>Colaboradores:</span>	</td>
										<td><span>@{{item.COLABORADORES | number: 0}}</span>	</td>
									</tr>
								</tbody>
							</table>	

						</div>
						
					</div>
				</div>

				

			</div>

		</div>

		
		
	</fieldset>
	
</div>
</form>

@overwrite