@extends('master')

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

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

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

	<!-- <form class="form-inline" ng-submit="vm.PrevProducao.gravar()"> -->

		<ul class="list-inline acoes" style="min-height: 73px;">  
			<li style="float: right; margin-right: 27px;">	
				<button ng-if="vm.PrevProducao.ALTERANDO" type="button" class="btn btn-success" ng-click="vm.PrevProducao.gravar()" data-hotkey="f1">
					<span class="glyphicon glyphicon-ok"></span> Gravar
				</button>
				
				<button ng-if="vm.PrevProducao.ALTERANDO" ng-click="vm.PrevProducao.cancelar()" type="button" class="btn btn-danger btn-cancelar" data-hotkey="esc">
					<span class="glyphicon glyphicon-ban-circle"></span> Cancelar
				</button>
			</li>
		
		<button ng-disabled="{{ userMenu($menu)->ALTERAR }} == 0 || vm.TabelaPrincipal.total_dados == 0" ng-if="!vm.PrevProducao.ALTERANDO" id="replicar" ng-click="vm.PrevProducao.replicarData()" type="button" class="btn btn-primary">
			<span class="glyphicon glyphicon-retweet"></span> Replicar
		</button> 
		
		<button ng-disabled="{{ userMenu($menu)->ALTERAR }} == 0 || vm.TabelaPrincipal.total_dados == 0" ng-if="!vm.PrevProducao.ALTERANDO" id="desabilitar" ng-click="vm.PrevProducao.alterar()" type="button" class="btn btn-primary" data-hotkey="f9">
			<span class="glyphicon glyphicon-edit"></span> Alterar
		</button> 

		<button ng-disabled="vm.TabelaPrincipal.total_dados == 0" ng-if="!vm.PrevProducao.ALTERANDO" data-consulta-historico data-tabela="TBPROGRAMACAO_SETOR" data-tabela-id="@{{ vm.PrevProducao.SELECTED.ID_PROGRAMACAO }}" type="button" class="btn gerar-historico" data-hotkey="alt+h">
      	    <span class="glyphicon glyphicon-time"></span> {{ Lang::get('master.historico') }}
   	    </button>
		<!-- <li>
            <button type="button" class="btn btn-primary btn-incluir" 
                data-hotkey="f6" ng-disabled="!{{ userMenu($menu)->INCLUIR }}" 
                ng-click="vm.PrevProducao.incluir()">
                <span class="glyphicon glyphicon-plus"></span> Incluir
            </button>
		</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.PrevProducaoItens.tabela_height(); vm.PrevProducao.tabela_height()">
				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;
		}
        
    </style>
	<form ng-submit="vm.PrevProducao.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>Data:</label>
					<div class="form-group"
						 style="display: flex; margin: 0; width: calc(28%);
								min-width: fit-content;
								max-width: fit-content;">
						<input 
							required
							type="date"
							style="width: 133px;"
							class="form-control filter_main"
							ng-atalho
							ng-change="vm.TabelaPrincipal.apagar(); vm.TabelaSecundaria.apagar();"
							ng-model="vm.PrevProducao.DATA1">
					</div>
				</div>

				<div style="display: contents;" class="consulta-estab-filtro"></div>
				<div style="display: contents;" class="consulta-perfil-filtro"></div>

				<!-- <div class="form-group" style="width: calc(100% - 1500px); padding-top: 15px; min-width: 200px;">
					<input type="text" style="width: 100% !important; min-width: 170px;"
						placeholder="Filtragem rápida..."
						class="form-control input-maior filter_main" 
						ng-model="vm.PrevProducao.FILTRO_DADOS">
				</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"
						ng-disabled="vm.PrevProducao.ALTERANDO == true">
						<span class="glyphicon glyphicon-filter"></span> Filtrar
					</button>
				</div>	
			</div>
	</form>

	<div class="row" style="display: flex; width: 100%;">
		<div style="display: block; width: calc(100% - 545px);">
		<label style="width: calc(100% - 25px); margin-left: 16px; text-align: center; background-color: #337ab7;
				color: white; margin-bottom: 0px !important; border-radius: 4px; border: 1px solid white;"> Previsão por Grupo de Produção <sub style="bottom: 0;font-size: 8px;">(HOME)</sub> </label>
			<div class="tabela_principal" id="tabela_principal" style="margin-right: 10px; margin-left: 15px;"></div>
		</div>	
		<div style="height: 600px !important; width: calc(700px);">
			<div class="form-group" style="display: grid;"> <!--width: calc(41%); -->
						<label style="width: calc(100%); margin-left: 0px; text-align: center; background-color: #337ab7;
								color: white; height: 23px; margin-bottom: 0px !important; border-radius: 4px; border: 1px solid white;"> Previsão por Horário do Grupo de Produção <sub style="bottom: 0;font-size: 8px;">(ALT+K)</sub>  </label>
					<div class="tabela_secundaria" id="tabela_secundaria"></div>
				</div>
			</div>
		<!-- <div class="form-group" style="display: grid; width: calc(41%);">
			<label style="width: calc(100%); margin-left: 0px; text-align: center; background-color: #337ab7;
					color: white; height: 23px; margin-bottom: 0px !important; border-radius: 4px; border: 1px solid white;"> Previsão por Horário do Grupo </label>
			<div class="tabela_secundaria" id="tabela_secundaria" style="margin-top: -177px;"></div>
		</div> -->
	</div>
	
	<!--	
	<div class="form-group" style="margin-bottom: 4px;">
		<input 
			type="text"
			style="width: 100% !important;"
			placeholder="Filtragem rápida..."
			class="form-control input-maior" 
			required
			ng-model="vm.PrevProducao.FILTRO_DADOS">
	</div>
	
    <div class="table-ec table-scroll" style="height: calc(100vh - 205px);">
        <table class="table table-striped table-bordered table-condensed table-no-break table-middle table-low">
            <thead>
                <tr gc-order-by="vm.PrevProducao.ORDER_BY">
                    <th field="STATUS" style="width: 23px; min-width: 23px;" ttitle="Status<br/>Verde: Ativo | Vermelho: Inativo"></th>                    
                    <th field="ID">ID</th>
					<th field="DESCRICAO">Descrição</th>
                </tr>
            </thead>
            <tbody>
                <tr 
                    ng-repeat="item in vm.PrevProducao.DADOS_RENDER = ( vm.PrevProducao.DADOS | orderBy : vm.PrevProducao.ORDER_BY | find: {model : vm.PrevProducao.FILTRO_DADOS ,fields : 'all'})"
                    ng-Click="vm.PrevProducao.visualizar()"
                    ng-focus="vm.PrevProducao.SELECTED = item"
                    ng-class="{ 'selected' : vm.PrevProducao.SELECTED == item }"
                    tabindex="0"
                    >
                    <td class="t-status status-@{{ item.STATUS }}">
                    </td>
                    <td>
                        <span>
                            @{{ item.ID || 0 | lpad: [4,0] }}
                        </span>
                    </td>
                    <td>
                        <span>
                            @{{ item.DESCRICAO }}
                        </span>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
	-->
	<!-- </form> -->
	
    @include($menu.'.modal.PrevProducao')
	@include($menu.'.modal.PrevProducaoItens')
</div>
@endsection

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