@extends('master')

@section('titulo')
    {{ Lang::get('vendas/_12330.titulo') }}
@endsection

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

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

	<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.CADMETARepresentante.incluir()">
                <span class="glyphicon glyphicon-plus"></span> Incluir
            </button>
		</li> 
		<li>
            <button 
                type="button" 
                class="btn btn-primary btn-incluir"
				ng-click="vm.CADMETARepresentante.CopiarRegistros()"
				ng-disabled="vm.CADMETARepresentante.VERIFC == 0">
                <span class="glyphicon glyphicon-copy"></span> Replicar
            </button>
		</li>
		<li>
		<button ng-if="vm.CADMETARepresentante.ALTERANDO" type="button" ng-click="vm.CADMETARepresentante.gravar()" class="btn btn-success" data-hotkey="f1">
			<span class="glyphicon glyphicon-ok"></span> Gravar
		</button>
		</li>
		<li>
		<button ng-if="vm.CADMETARepresentante.ALTERANDO" ng-click="vm.CADMETARepresentante.cancelar()" type="button" class="btn btn-danger btn-cancelar" data-hotkey="esc">
			<span class="glyphicon glyphicon-ban-circle"></span> Cancelar
		</button>
		</li>
		<li>
		<button ng-disabled="{{ userMenu($menu)->ALTERAR }} == 0 || !vm.CADMETARepresentante.VERIFC_MARCAR" ng-if="!vm.CADMETARepresentante.ALTERANDO" ng-click="vm.CADMETARepresentante.alterar()" type="button" class="btn btn-primary" data-hotkey="f9">
			<span class="glyphicon glyphicon-edit"></span> Alterar
		</button>   
		</li>
		<li>
		<button ng-disabled="{{ userMenu($menu)->EXCLUIR }} == 0 || !vm.CADMETARepresentante.VERIFC_MARCAR" ng-if="!vm.CADMETARepresentante.ALTERANDO" ng-click="vm.CADMETARepresentante.excluir()" type="button" class="btn btn-danger" data-hotkey="f12">
			<span class="glyphicon glyphicon-trash"></span> Excluir
		</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>
	
	<legend>Metas Cadastradas</legend>
	<form ng-submit="vm.CADMETARepresentante.consultar()" class="form-inline">
	<div 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" style="margin-bottom: 4px;">
		<label for="filtro_dados2" ttitle="Filtrar representantes consultados">Representante</label>
		<input 
			id="filtro_dados2"
			type="text"
			style="width: 60%;"
			placeholder="Filtragem rápida..."
			class="form-control input-maior" 
			ng-model="vm.CADMETARepresentante.FILTRO_DADOS">
	</div>

	<div class="form-group">
		<label for="filtro_dados" ttitle="Mês para filtragem da consulta">Mês</label>
		<select
			id="filtro_dados"
			class="form-control"
			ng-model="vm.CADMETARepresentante.FILTRO_MES"
			ng-change="vm.CADMETARepresentante.DADOS = []; vm.CADMETARepresentante.Block_Buttons();"
			ng-disabled="vm.CADMETARepresentante.ALTERANDO">
			<option value="0">Todos os Meses</option>
			<option value="1">Janeiro</option>
			<option value="2">Fevereiro</option>
			<option value="3">Março</option>
			<option value="4">Abril</option>
			<option value="5">Maio</option>
			<option value="6">Junho</option>
			<option value="7">Julho</option>
			<option value="8">Agosto</option>
			<option value="9">Setembro</option>
			<option value="10">Outubro</option>
			<option value="11">Novembro</option>
			<option value="12">Dezembro</option>
		</select>
	</div>

	<div class="form-group">
		<label ttitle="Ano para filtragem da consulta">Ano:</label>
		<select 
			class="form-control" 
			ng-model="vm.CADMETARepresentante.FILTRO_ANO"
			ng-change="vm.CADMETARepresentante.DADOS = []"
			ng-disabled="vm.CADMETARepresentante.ALTERANDO"
			form-validate="true">
			<option ng-repeat="n in [].constructor(100) track by $index+1990">@{{ $index+1990 }}</option>
		</select>
	</div>

	<button type="submit" class="btn btn-xs btn-primary btn-filtrar" ng-disabled="vm.CADMETARepresentante.ALTERANDO" data-hotkey="alt+f" id="btn-table-filter" style="vertical-align: text-top;top: 2px;">
		<span class="glyphicon glyphicon-filter"></span> Filtrar
	</button>
	
	</div>
	</form>
		
    <div class="table-ec table-scroll" style="height: calc(100vh - 205px);">
        <table id="table_data" class="table table-striped table-bordered table-condensed table-no-break table-middle table-low">
            <thead>
                <tr gc-order-by="vm.CADMETARepresentante.ORDER_BY">
                 <!--<th field="STATUS" style="width: 23px; min-width: 23px;" ttitle="Status<br/>Verde: Ativo | Vermelho: Inativo"></th>-->                    
				 	<th id="CheckField" ttitle="Selecionar campos para alterá-los ou excluí-los" style="width:3%;">
					<input
						id="check_all"
						type="checkbox"
						class="chk-selec-form"
						ng-click="vm.CADMETARepresentante.MarcarLinhas();vm.CADMETARepresentante.ChecarMarcacaoTabela()"
						
						tabindex="-1">
					</th>	
				 	<th field="ID">ID</th>
					<th field="DESC_FAMILIA">Família</th>
					<th field="DESC_REPRESENTANTE">Representante</th>
					<th field="DESC_MES">Mês</th>
					<th field="VALOR">Valor</th>
					<th field="QUANTIDADE">Quantidade</th>
					<th ng-if="!vm.CADMETARepresentante.ALTERANDO" field="HISTORICO">Histórico</th>
                </tr>
            </thead>
            <tbody vs-repeat>
				<!-- ng-Click="vm.CADMETARepresentante.visualizar()"-->
				<tr ng-repeat="item in vm.CADMETARepresentante.DADOS_RENDER = ( vm.CADMETARepresentante.DADOS | orderBy : ['DESC_FAMILIA','REPRESENTANTE_ID','DESC_MES']| find: {model : vm.CADMETARepresentante.FILTRO_DADOS ,fields : ['DESC_REPRESENTANTE','DESC_FAMILIA','DESC_MES']})"
                    ng-focus="vm.CADMETARepresentante.SELECTED = item"
                    ng-class="{ 'selected' : vm.CADMETARepresentante.SELECTED == item }"
                    tabindex="0">
                    <!--<td class="t-status status-@{{ item.STATUS }}">
                    </td>-->
					<td>
						<span>
						<input
							type="checkbox"
							class="chk-selec-form"
							ng-model="item.Check"
							ng-click="vm.CADMETARepresentante.ChecarMarcacaoTabela()">
						</span>
					</td>
					<td>
                        <span>
							@{{ item.ID || 0 | lpad: [4,0] }}	
                        </span>
					</td>
					<td>
                        <span>
                            @{{ item.DESC_FAMILIA }}
                        </span>
                    </td>
                    <td>
                        <span>
                            @{{ item.DESC_REPRESENTANTE }}
                        </span>
					</td>
					<td>
                        <span>
                            @{{ item.DESC_MES }}
                        </span>
					</td>
					<td style="text-align: end;">
                        <span ng-if="vm.CADMETARepresentante.ALTERANDO">
						<div class="input-group">
						<div class="input-group-addon">
							R$
						</div>
						<input
							style="text-align:right;
									font-size:small;
									width: 40%; 
									padding-right: 0pt; 
									height: 33px; 
									font-size: 14px; 
									text-size-adjust: 100%;"
							type="number"
							min="0.01"
							step="0.01"
							class="form-control money_mask"
							aria-describedby="basic-addon2"
							ng-model="item.VALOR"
							ng-readonly="item.Check == false"
							ng-class="{'input_desbloqueado':item.Check == true}">
						</div>
						</span>
						<span ng-if="!vm.CADMETARepresentante.ALTERANDO">
							R$ @{{ item.VALOR | number:2 }}
						</span>
					</td>
					<td style="text-align: end;">
						<span ng-if="vm.CADMETARepresentante.ALTERANDO">
						<div class="form-group">
						<input
							style="text-align:right; 
							font-size:small; 
							width: 55%; 
							padding-right: 0pt;
							height: 33px; 
							font-size: 14px;  
							text-size-adjust: 100%;"
							type="number"
							min="0.01"
							step="0.01"
							class="form-control money_mask"
							ng-model="item.QUANTIDADE"
							ng-readonly="item.Check == false"
							ng-class="{'input_desbloqueado':item.Check == true}">
						</div>
						</span>
						<span ng-if="!vm.CADMETARepresentante.ALTERANDO">
							 @{{ item.QUANTIDADE | number:2 }}
						</span>
					</td>
					<td>
						<button ng-if="!vm.CADMETARepresentante.ALTERANDO" ng-disabled="vm.CADMETARepresentante.VERIFC == 0" data-consulta-historico data-tabela="TBMETA" data-tabela-id="@{{ item.ID }}" type="button" class="btn gerar-historico">
							<span class="glyphicon glyphicon-time"></span> {{ Lang::get('master.historico') }}
						</button>
					</td>
                </tr>
            </tbody>
        </table>
    </div>
    
    @include($menu.'.modal.CADMETARepresentante')
	@include($menu.'.modal.CADMETARepresentanteItens')
	@include($menu.'.modal.CADMETARepresentanteCopiarDados')
</div>
@endsection

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