@extends('master')

@section('titulo')
    {{ Lang::get('ppcp/_22770.titulo') }}
@endsection

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

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

	<input type="hidden" id="CLS_CLIENTE"   name="CLS_CLIENTE"  value="-1">
	<input type="hidden" id="POST_CLIENTE"  name="POST_CLIENTE" ng-click="vm.ConferenciaPDV.addNewCliente()">
	
	<input type="hidden" id="CLS_PEDIDO"    name="CLS_PEDIDO"   value="-1">
	<input type="hidden" id="CLS_RESSUP"    name="CLS_RESSUP"   value="-1">
	<input type="hidden" id="POST_PEDIDO"   name="POST_PEDIDO"  ng-click="vm.RessuprimentoPecasGerarPedido.removerPedRessup()">

	<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.RessuprimentoPecas.incluir()">
                <span class="glyphicon glyphicon-plus"></span> Incluir
            </button>
		</li> -->

        
		<!-- <li ng-if="vm.RessuprimentoPecas.DADOS.length > 0" style="float: right; margin-right: 26px;">
            <button type="button" class="btn btn-danger" style="background-color: #323131 !important; border-color: #5a5a5a !important;"
                data-hotkey="f11" ng-disabled="!{{ userMenu($menu)->INCLUIR }}" 
                ng-click="vm.RessuprimentoPecas.gerarPedido()">
                <span class="glyphicon glyphicon-ok"></span> Gerar Pedido
            </button>
		</li> -->

		<!-- <li ng-if="vm.RessuprimentoPecas.DADOS.length > 0" style="float: right; margin-right: 26px;">
            <button type="button" class="btn btn-success" 
                data-hotkey="f10" ng-disabled="!{{ userMenu($menu)->INCLUIR }}" 
                ng-click="vm.RessuprimentoPecas.gravarAlteracoes()">
                <span class="glyphicon glyphicon-ok"></span> Gravar
            </button>
		</li> -->

		<li ng-if="vm.RessuprimentoPecas.DADOS.length > 0" style="float: right;">
            <button type="button" class="btn btn-warning " ng-click="vm.RessuprimentoPecas.exportToXlsExec();">
                <span class="glyphicon glyphicon-save"></span>
                Exportar XLS
            </button>
        </li>

		<li ng-if="vm.RessuprimentoPecas.DADOS.length > 0" style="float: right;">
            <button type="button" class="btn btn-primary " ng-click="vm.RessuprimentoPecasGerarPedido.incluir();">
                <span class="glyphicon glyphicon-plus"></span>
                Gerar Pedido
            </button>
        </li>
		
        <!-- <li ng-if="vm.RessuprimentoPecas.DADOS.length > 0" style="float: right;">
            <button type="button" class="btn btn-warning " ng-click="vm.TabelaPrincipal.imprimir();">
                <span class="glyphicon glyphicon-print"></span>
                Imprimir
            </button>
        </li> -->

		<!-- <li ng-if="vm.FUNCIONALIDADES.length > 0">
			<div class="dropdown" id="dropCompilado">
				<button
					id="dLabel"
					type="button"
					data-toggle="dropdown"
					data-hotkey="f2"
					class="btn btn-danger"
					ng-click="vm.RessuprimentoPecasImpressao.focusItem($event);"
					ng-dbclick="$event.stopPropagation();">
					<span class="fa fa-th-list"></span> Funcionalidades
				</button>
				<ul class="dropdown-menu multi-level" 
					role="menu" 
					aria-labelledby="dropdownMenu">
					<li class="dropdown-header" style="text-transform: initial; font-weight: bold;">Ações Disponíveis</li>
					<li tabindex="0" 
						ng-repeat="item in vm.FUNCIONALIDADES track by $index" 
						ng-keypress="$event.keyCode == 13 && item.FUNCAO();" 
						ng-keydown="vm.RessuprimentoPecasImpressao.changeSelection($event)">
						<a ng-click="item.FUNCAO()" style="cursor: pointer;">
							<span class="@{{item.ICONE}}"></span> @{{item.NOME}}
						</a>
					</li>
				</ul>
			</div>
		</li> -->
		
		<li>
			<button type="button" class="btn btn-default" 
				id="filtrar-toggle" data-toggle="collapse" 
				data-target="#filtro_main" aria-expanded="true" 
				aria-controls="filtro_main"
				ng-click="vm.RessuprimentoPecas.tabela_height()">
				Filtro
				<span class="caret"></span>
			</button>
		</li>

		
		<li ng-if="vm.RessuprimentoPecas.DADOS.length > 0" style="width: 249px; ">
			<div class="input-group right-icon" style="width: 100% !important; display: inline-flex;">
				<div class="input-group-addon fontBold" style="padding: 9px !important; width: 155px;"><span>Dias para Modelo/Cor</span></div>

				<input ng-number-format="0" type="text" style="width: 23% !important;" class="form-control text-right" ng-disabled="false" ng-model="vm.RessuprimentoPecas.DIAS_PADRAO">

				<div class="input-group-addon fontBold" style="padding: 9px !important; width: 32px;" ng-click="vm.RessuprimentoPecas.aplicarDiasPadrao();"><i ttitle="Aplicar quantidade de dias padrão para modelo/cor" class="glyphicon glyphicon-ok"></i></div>
			</div>
		</li>

		<li ng-if="vm.RessuprimentoPecas.DADOS.length > 0">
			<span class="classeLegend">
				@{{vm.RessuprimentoPecas.QTD_DIAS_FAT}} dias de vendas
			</span>

		</li>

		<li ng-if="vm.RessuprimentoPecas.DADOS.length > 0">
			<select class="form-control fontBold" style="width: 400px !important;" ng-model="vm.RessuprimentoPecas.TIPO_FILTRO_DINAMICO" ng-change="vm.RessuprimentoPecas.changeTipoFiltroDinamico();">
				<option ng-value="1">Todos</option>
				<option ng-value="2">Apenas Ressuprimento</option>
				<option ng-value="3">Apenas Estoque Mínimo</option>
				<option ng-value="4">Apenas Ressuprimento e Estoque Mínimo</option>
				<option ng-value="5">Apenas Estoque Físico maior que Estoque Mínimo</option>
			</select>
		</li>

		<div style="float: right;" ng-if="vm.RessuprimentoPecas.DADOS.length > 0">
			<label style="font-weight: bold; margin-right: 4px;">Agrupamento:</label>

			<div class="form-group" style="display: inline-block !important; margin-bottom: 0 !important;">
				<div class="check-group">
					<label class="lbl" style="margin-right: 25px;">
						<input type="radio" ng-model="vm.RessuprimentoPecas.NIVEL_AGRUPAMENTO" ng-value="1" ng-checked="vm.RessuprimentoPecas.NIVEL_AGRUPAMENTO == 1" ng-change="vm.RessuprimentoPecas.changeNivelAgrupamento();">
						<span>Modelo</span>
					</label>
					<label class="lbl" style="margin-right: 25px;">
						<input type="radio" ng-model="vm.RessuprimentoPecas.NIVEL_AGRUPAMENTO" ng-value="2" ng-checked="vm.RessuprimentoPecas.NIVEL_AGRUPAMENTO == 2" ng-change="vm.RessuprimentoPecas.changeNivelAgrupamento();">
						<span>Modelo/Cor</span>
					</label>
					<label class="lbl" style="margin-right: 25px;">
						<input type="radio" ng-model="vm.RessuprimentoPecas.NIVEL_AGRUPAMENTO" ng-value="3" ng-checked="vm.RessuprimentoPecas.NIVEL_AGRUPAMENTO == 3" ng-change="vm.RessuprimentoPecas.changeNivelAgrupamento();">
						<span>Modelo/Cor/Tam.</span>
					</label>
				</div>
			</div>
		</div>
		
	</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;
		}
        
	</style>
	
	<div class="row">

		<!-- <div ng-class="{'col-md-6': vm.RessuprimentoPecas.DADOS.length > 0, 'col-md-12': vm.RessuprimentoPecas.DADOS.length == 0}"> -->
			<form ng-submit="vm.RessuprimentoPecas.consultar(1)" class="form-inline" style="margin-top: 15px;">		
					<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>
							<div class="input-group">
								<select 
									name="repeatSelect" 
									id="repeatSelect"  
									ng-model="vm.RessuprimentoPecas.FILTRO_STATUS">
									<option value="1">ATIVOS</option>
									<option value="0">INATIVOS</option>
									<option value="">TODOS</option>
								</select>
							</div>
						</div> -->

						<div class="form-group" style="display: inline-block; margin-top: 13px; margin-left: 5px;">
							<!-- <label style="display: inline-block; margin-left: 15px; z-index: 1; background-color: rgb(255, 255, 255); width: fit-content; padding-right: 5px; padding-left: 5px; ">Histórico de Vendas</label> -->
							<select name="repeatSelect" id="repeatSelect" class="normal-case" ng-model="vm.RessuprimentoPecas.FILTRO_TIPO_OPERACAO" 
								style="display: inline-flex; margin-left: 15px; z-index: 1; background-color: rgb(255, 255, 255); width: fit-content; padding-right: 5px; padding-left: 5px;">
								<option ng-value="1">Histórico de Vendas</option>
								<option ng-value="2">Histórico de Transferência</option>
								<option ng-value="0">Todos</option>
							</select>

							<div class="form-group" style="display: flex; width: fit-content; padding-left: 15px; padding-bottom: 15px; border-radius: 9px;
														border-width: 1px 1px 1px 1px; border-color: rgb(221, 221, 221); border-style: solid; margin-top: -9px;">
								<div class="form-group" style="display: grid;">
									<div class="form-group" style="display: flex;">
										<div class="form-group">																
											<div class="form-group" style="margin-right: 0px !important;">
												<div class="form-group" id="formGroutMotherData">
													<input type="date" style="width: 130px; margin-left: 4px; margin-top: 4px;" class="form-control filter_main" ng-model="vm.RessuprimentoPecas.DATA_INICIO" ng-change="vm.RessuprimentoPecas.limparFiltragem();" ng-atalho>
													<label style="padding-top: 8px; padding-right: 5px; padding-left: 5px;"> à </label>
													<input type="date" style="width: 130px; margin-top: 4px;" class="form-control filter_main" ng-model="vm.RessuprimentoPecas.DATA_FIM" ng-change="vm.RessuprimentoPecas.limparFiltragem();" ng-atalho>
												</div>
											</div>

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


						<div class="form-group" style="display: inline-block; margin-top: 13px; margin-left: 5px;">
							<label style="display: inline-block; margin-left: 15px; z-index: 1; background-color: rgb(255, 255, 255); width: fit-content; padding-right: 5px; padding-left: 5px; ">Estoque de Ressuprimento</label>
							<div class="form-group" style="display: flex; width: fit-content; padding-left: 15px; padding-bottom: 15px; border-radius: 9px;
														border-width: 1px 1px 1px 1px; border-color: rgb(221, 221, 221); border-style: solid; margin-top: -9px;">
								<div class="form-group" style="display: grid;">
									<div class="form-group" style="display: flex;">
										<div class="form-group">																
											<div style="display: -webkit-inline-box;" class="consulta-estab-filtro-est-ress"></div>

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


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

						
						<div class="form-group" style="margin-right: 0px !important;">
							<div class="form-group" style="display:flex; width: calc(29%); min-width: fit-content; max-width: fit-content; margin-top: 16px;
								background-color: #e2e2e2; padding: 0px; border-radius: 6px; height: 35px; padding-right: 4px; border: 1px solid #cccccc;">
								
								<input 
									style="margin-top: -5px; margin-left: 7px;"
									type="checkbox" 
									ng-checked="vm.RessuprimentoPecas.AGP_BY_PERFIL == '1'"
									ng-true-value="'1'"
									ng-false-value="'0'"
									ng-click="vm.RessuprimentoPecas.AGP_BY_PERFIL = (vm.RessuprimentoPecas.AGP_BY_PERFIL  == '1') ? '0' : '1'">

								<div ng-click="vm.RessuprimentoPecas.AGP_BY_PERFIL = (vm.RessuprimentoPecas.AGP_BY_PERFIL == '1') ? '0' : '1'"
										style="width: 190px; display: block; padding: 9px 0px 0px 3px; cursor: pointer;">
									Agrupar por Perfil de Cor
								</div>
							</div>		 
						</div>

						<div class="form-group" style="margin-right: 0px !important;">
							<div class="form-group" style="display:flex; width: calc(29%); min-width: fit-content; max-width: fit-content; margin-top: 16px;
								background-color: #e2e2e2; padding: 0px; border-radius: 6px; height: 35px; padding-right: 4px; border: 1px solid #cccccc;">
								
								<input 
									style="margin-top: -5px; margin-left: 7px;"
									type="checkbox" 
									ng-checked="vm.RessuprimentoPecas.SOMENTE_VENDA == '1'"
									ng-true-value="'1'"
									ng-false-value="'0'"
									ng-click="vm.RessuprimentoPecas.SOMENTE_VENDA = (vm.RessuprimentoPecas.SOMENTE_VENDA  == '1') ? '0' : '1'">

								<div ng-click="vm.RessuprimentoPecas.SOMENTE_VENDA = (vm.RessuprimentoPecas.SOMENTE_VENDA == '1') ? '0' : '1'"
										style="width: 190px; display: block; padding: 9px 0px 0px 3px; cursor: pointer;">
									Somente Modelos Vendidos
								</div>
							</div>		 
						</div>


						<br>
						<div style="width: 600px;">

							<div  style="width: 115px; float: left;">
								<ul id="tab" class="nav nav-tabs" role="tablist"> 
									<li  style="text-align: end;
											border: 1px solid #7e7979;
											border-radius: 5px 0px 0px 5px;
											border-right: 0px;
											background-color: #f1efef;
											margin-bottom: 3px;
											width: 100%;"  
										
										ng-click="vm.RessuprimentoPecas.tabParanClick(param, '.consulta-g-' + param.TAG);"
										role="presentation"
										class="@{{$index == 0 ? 'active' : ''}} tab-detalhamento"
										ng-repeat="param in vm.RessuprimentoPecas.CONSULTAS  | orderBy:'ORDEM' track by $index">
					
										<a
											style=" padding: 8px 15px 9px 0px;
													float: right;
													border-radius: 5px 1px 1px 4px;
													width: calc(100% - 2px);
													border: 0px;
													font-weight: bold;
													height: 35px;
													margin-right: -2px;"
											href="#@{{param.PARAMETRO}}-container" id="@{{param.PARAMETRO}}-tab" data-hotkey="alt+@{{$index+1}}" role="tab" data-toggle="tab" aria-controls="@{{param.PARAMETRO}}-container" aria-expanded="true">
										
											<label ng-if="(param.TTITLE+'').length == 0">@{{param.DESCRICAO}}</label>
											<label ttitle="@{{param.TTITLE}}" ng-if="(param.TTITLE+'').length > 0">@{{param.DESCRICAO}}</label>
										</a>
									</li>
								</ul>
					
							</div>
				
							<div  style="width: calc(100% - 115px);
										float: right;
										padding: 5px;
										border: 1px solid #7e7979;
										border-radius: 0px 4px 5px 5px;
										background-color: #ffffff;">
					
								<div id="tab-content" class="tab-content"  style="height: calc(100% - 45px); padding: 3px; border: 0px;">
					
									<div
										ng-repeat="param in vm.RessuprimentoPecas.CONSULTAS | orderBy:'ORDEM' track by $index"
										role="tabpanel" class="tab-item-aconsulta tab-pane @{{$index == 0 ? 'active' : ''}}"
										id="@{{param.PARAMETRO}}-container" 
										aria-labelledby="@{{param.PARAMETRO}}-tab">
										
										<div class="@{{param.TAG}} consulta-multipla" id="@{{param.TAG}}"></div>
					
										<div class="table-ec table-scroll" style="height: 185px;" >
											<table class="table table-striped tab-enter table-bordered table-condensed table-no-break table-middle table-low tabelaJS">
												<thead>
													<tr>
														<th scope="col" ng-repeat="campo in param.Consulta.option.campos_tabela">@{{campo[1]}}</th>
														<th style="width: 50px;"></th>
													</tr>
												</thead>
												<tbody>
													<tr ng-repeat="item in param.ITENS"
														ng-keydown="vm.RessuprimentoPecas.atalhoTabelaItenParan(item, '.consulta-g-' + param.TAG, $event)"
														ng-focus="param.SELECTED = item;"
														ng-class="{ 'selected' : param.SELECTED == item }"
														tabindex="0">
														<th ng-repeat="campo in param.Consulta.option.campos_tabela">@{{item[campo[0]]}}</th>
														<th  style="width: 50px; padding: 3px;">
															<button
																type="button"
																class="btn btn-sm btn-danger "
																style="margin-left: 6px;"
																data-toggle="dropdown"
																aria-expanded="false"
																ng-disabled="param.Consulta.usuario_vinculado == true"
																ng-click="vm.RessuprimentoPecas.removerItemTabelaParan(item, param.ITENS);">
																<span class="glyphicon glyphicon-trash"></span>
															</button>
														</th>
													</tr>
												</tbody>
											</table>
										</div>
									</div>
					
								</div>
							</div>
						</div>

						<div class="form-group" style="padding-top: 12px; 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> -->

		

	</div>

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


    @include($menu.'.modal.RessuprimentoPecas')
	@include($menu.'.modal.RessuprimentoPecasItens')
	@include($menu.'.modal.RessuprimentoPecasImpressao')
	
	@include($menu.'.modal.ConfirmItensSelected')


	<div id="modalDetalheCoresSemPerfil" class="modal" data-backdrop="static" data-keyboard="false" role="dialog" aria-hidden="true">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<div class="modal-header-left">
						<h4 class="modal-title">
							<span>Cores do Perfil @{{vm.RessuprimentoPecas.PERFIL_DESCRICAO}} - Modelo @{{vm.RessuprimentoPecas.MODELO_DESCRICAO}}</span>
						</h4>
					
					</div>
					<div class="modal-header-right">

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

					</div>
					
				</div>
				<div class="modal-body" style="height: calc(100vh - 300px);">
					<form class="form-inline">
						<div class="row">
							<div class="tabela_cores_sem_perfil" id="tabela_cores_sem_perfil"></div>	
						</div>
					</form>

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


	@include($menu.'.modal.RessuprimentoPecasGerarPedido')
	@include($menu.'.modal.RessuprimentoPecasItensNaoImpotados')

	
	<div id="modalProcessoAtualizacao" class="modal" data-backdrop="static" data-keyboard="false" role="dialog" aria-hidden="true">
		<div class="modal-dialog modal-m">
			<div class="modal-content">
				<div class="modal-header">
					<div class="modal-header-left">
						<h3 style="margin:0;" ng-if="vm.RessuprimentoPecas.GRAVACAO == true">Gravando registros</h3>
						<h3 style="margin:0;" ng-if="vm.RessuprimentoPecas.GRAVACAO == false && vm.RessuprimentoPecas.CONSULTANDO_PED == false">Consultando registros</h3>
						<h3 style="margin:0;" ng-if="vm.RessuprimentoPecas.GRAVACAO == false && vm.RessuprimentoPecas.CONSULTANDO_PED == true">Consultando Dados do Pedido</h3>
					</div>
					<div class="modal-header-right">
						<button ng-if="vm.RessuprimentoPecas.HABILITA_FECHAR_MODAL_ATUALIZACAO == true" type="button" class="btn btn-default btn-fechar-modal btn-voltar" ng-click="vm.RessuprimentoPecas.fecharModalAtualizacao()" data-hotkey="esc">
        					<span class="glyphicon glyphicon-chevron-left"></span> Voltar
    					</button>	
					</div>
					
				</div>
				<div class="modal-body">
					<p ng-bind="vm.RessuprimentoPecas.DESC_PROGRESSO"></p>
					<p style="font-weight: bold;" ng-bind="vm.RessuprimentoPecas.DESC_MODELO"></p>
					<div class="progress">
						<div id="progressoBarAtualizacao" class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
							<span style="font-weight: bold;">@{{vm.RessuprimentoPecas.PERCENTUAL | number: 2}}%</span>
						</div>
					</div>
				</div>
				<!-- <div class="modal-footer" style="text-align: center !important; color: #a90f0f !important;">
					<p style="font-weight: bold;"><i class="glyphicon glyphicon-time"></i> @{{vm.RessuprimentoPecas.TEMPO_ESTIMADO}}</p>
				</div> -->
			</div>
		</div>
	</div>

</div>
@endsection

@section('script')
	<script src="{{ elixir('assets/js/direct-print.js') }}"></script>
    <script src="{{ elixir('assets/js/_22770.js') }}"></script>
@append