@extends('master')

@section('titulo')
    27050 - Consulta Simplificada de Produtos
@endsection

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

@section('conteudo')


    <!--<div 
        class="inline consulta-familia"
        x-model="vm.ConsultaFamilia"
        x-label="Família"
        x-ttitle="Somente família de produto ativa habilitada para venda"
        x-api="/_27010/api/familia"
        x-data-request="{STATUS: 1,HABILITA_VENDA: 1}"
        x-returns="['ID','DESCRICAO']"
        x-table-returns="[['ID', 'Id'],['DESCRICAO','Descrição']]"
		x-input-width="200px">
	</div>-->

	<div ng-controller="Ctrl as vm" ng-cloak>
			
		<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="table-filter collapse in" 
			 aria-expanded="true" 
			 style="margin-bottom: 4px;
				    background: rgba(221,221,221,.33);
			  	    padding: 15px 10px 7px;
					border-radius: 5px;
					width: calc(98vw);
					display: inline-flex;">
			
			<div class="form-group">
				<div style="display: -webkit-inline-box;" class="consulta-tipo"></div>
			</div>
			<div class="form-group">
				<div style="display: -webkit-inline-box;" class="consulta-familia"></div>
			</div>
			<div class="form-group">
				<div style="display: -webkit-inline-box;" class="consulta-linha"></div>
			</div>
			<div class="form-group">
				<div style="display: -webkit-inline-box;" class="consulta-modelo"></div>
			</div>
			
			<div class="form-group" 
				 style="margin-bottom: 4px;
						padding-left: 20px;
						width: calc(40%);">
				<label>Filtragem por Código/Descrição</label>
				<input 
					type="text"
					style="width: 100% !important;"
					placeholder="Filtragem rápida..."
					class="form-control input-maior filter_prd" 
					required
					ng-model="vm.Produto.FILTRO_DADOS">
			</div>

			<div class="form-group"
				 style="padding-left: 20px;">
				<label ttitle="Quantidade de registros a ser buscada">QTD</label>
				<input	
					type="number"
					min="0"
					max="999"
					class="form-control input-menor filter_prd"
					ng-model="vm.Produto.FILTRAGEM_DATA.QTD">
			</div>
			
			<div class="form-group"
				 style="padding-left: 2px;
						height: 50px;
						padding-top: 17px;">
				<button
					style="height: 35px !important;"	
					type="button"
					class="btn btn-primary btn-filtrar"
					data-hotkey="alt+f"
					ng-click="vm.Produto.consultar_produtos()">
					<span class="glyphicon glyphicon-filter">Filtrar</span>
				</button>
			</div>

		</div>

		<div class="table-ec table-scroll" style="height: calc(100vh - 205px); width: calc(98vw);">
			<table class="table table-striped table-bordered table-condensed table-no-break table-middle table-low">
				<thead>
					<tr gc-order-by="vm.Produto.ORDER_BY">
						<th field="STATUS" style="width: 23px; min-width: 23px;" ttitle="Status<br/>Verde: Ativo | Vermelho: Inativo"></th>
						<th field="TIPOPRODUTO_CODIGO" colspan="2"> Tipo </th>
						<th field="FAMILIA_CODIGO" colspan="2"> Família </th>
						<th field="LINHA_CODIGO" colspan="2"> Linha </th>
						<th field="MODELO_CODIGO" colspan="2"> Modelo </th>
						<th field="CODIGO" colspan="2"> Produto </th>
						<th field="SECAO"> Seção </th>
						<th field="FICHA"> Rend/Larg/Comp </th>
						<th field="GRADE_CODIGO"> Grade </th>
						<th field="LOCALIZACAO_CODIGO"> Loc </th>
						<th field="NCM_CODIGO"> Ncm </th>
						<th field="COR_CODIGO"> Cor </th>
						<th field=""> </th>
					</tr>
				</thead>
				<tbody vs-repeat vs-scroll-parent=".table-ec">
					<tr ng-repeat="item in vm.Produto.DADOS_RENDER = ( vm.Produto.DADOS | orderBy : ['DESCRICAO'] | find: {model : vm.Produto.FILTRO_DADOS ,fields : ['CODIGO','DESCRICAO']})"
						ng-focus="vm.Produto.SELECTED = item"
						ng-class="{ 'selected' : vm.Produto.SELECTED == item }"
						tabindex="0">
						<td class="t-status status-@{{ item.STATUS }}">
						</td>
						<td>
							<span>
								@{{ item.TIPOPRODUTO_CODIGO }}
							</span>
						</td>
						<td>
							<span>
								@{{ item.TIPO_DESCRICAO }}
							</span>
						</td>
						<td>
							<span>
								@{{ item.FAMILIA_CODIGO }}
							</span>
						</td>
						<td>
							<span>
								@{{ item.FAMILIA_DESCRICAO }}
							</span>
						</td>
						<td>
							<span>
								@{{ item.LINHA_CODIGO }}
							</span>
						</td>
						<td>
							<span>
								@{{ item.LINHA_DESCRICAO }}
							</span>
						</td>
						<td>
							<span>
								@{{ item.MODELO_CODIGO }}
							</span>
						</td>
						<td>
							<span>
								@{{ item.MODELO_DESCRICAO }}
							</span>
						</td>
						<td>
							<span>
								@{{ item.CODIGO }}
							</span>
						</td>
						<td>
							<span>
								@{{ item.DESCRICAO }}
							</span>
						</td>
						<td>
							<span>
								@{{ item.SECAO }}
							</span>
						</td>
						<td>
							<span>
								@{{ item.FICHA }}
							</span>
						</td>
						<td>
							<span>
								@{{ item.GRADE_CODIGO }}
							</span>
						</td>
						<td>
							<span>
								@{{ item.LOCALIZACAO_CODIGO }}
							</span>
						</td>
						<td>
							<span>
								@{{ item.NCM_CODIGO }}
							</span>
						</td>
						<td>
							<span>
								@{{ item.COR_CODIGO }}
							</span>
						</td>
						<td>
							<span>
								<button
									type="button"
									class="btn btn-primary btn-filtrar"
									ng-click="vm.Produto.checar_estoque(item.CODIGO);">
									<span class="glyphicon glyphicon-search"></span> Saldo de Estoque

								</button>
							</span>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>

@endsection

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