@extends('helper.include.view.modal', ['id' => 'modal-consultar-cor-por-modelo'])

@section('modal-header-left')

<h4 class="modal-title">
	Cores
</h4>

@overwrite

@section('modal-header-right')
	
	<button ng-click="vm.addItem.CorCancelar()" type="button" class="btn btn-default  btn-voltar" data-hotkey="f11">
        <span class="glyphicon glyphicon-chevron-left"></span> Voltar
    </button>	

@overwrite

@section('modal-body')

<div class="row" style="width:100% !important;">
	<div class="form-group" style="width:100% !important;">
		<div class="input-group" style="width:100% !important;">
			<input  style="width: calc(100% - 37px) !important;" type="search" class="form-control input-maior input-filtrar-modelo ng-pristine ng-valid ng-empty ng-touched" placeholder="Filtrar..." autocomplete="off" ng-model="vm.addItem.filtroCor">
			<button type="button" class="input-group-addon btn-filtro" tabindex="-1" ng-click="vm.addItem.alterarCor()">
				<span class="fa fa-filter"></span>
			</button>
		</div>
	</div>
</div>

<div class="table-container table-container-cor-por-modelo" style="height: calc(100vh - 335px); min-height: 300px;">
	<table class="table table-bordered table-header">
		<thead>
			<tr>
				<th class="cor-amostra" title="Amostra">Amostra</th>
				<th class="cor-id text-right" title="Id">Id</th>
				
				@if ($pu218 != 1)
				<th class="cor-descricao" title="Cor">Cor</th>
				@endif

				@php $class_maior = '';
				
				@if ($pu218 == 1)
					@php $class_maior = 'col-maior';
				@endif

				<th class="cor-condicao {{ $class_maior }}" title="Condição">Condição</th>

			</tr>
		</thead>
	</table>

	<div class="scroll-table">
		<table class="table table-striped table-bordered table-hover table-body">
			<tbody vs-repeat vs-scroll-parent=".table-container">
				<tr
					tabindex="0"
					ng-repeat="cor in vm.addItem.cores | orderBy : ['MAIS_PEDIDO', 'DESCRICAO'] | filter : vm.addItem.filtroCor"
					ng-click="vm.addItem.selecionarCor(cor)"
					ng-keypress="$event.keyCode == 13 ? vm.addItem.selecionarCor(cor) : null"
					ng-class="{'selected': cor.CODIGO == vm.addItem.cor.CODIGO, 'mais-pedido': cor.MAIS_PEDIDO == 0}"
				>
					<td class="cor-amostra">
						<span 
							style="background-color: @{{ cor.AMOSTRA | toColor }}"
							ng-if="cor.AMOSTRA > 0"
						></span>
					</td>
					<td class="cor-id text-right">@{{ cor.CODIGO }}</td>
					
					@if ($pu218 != 1)
					<td class="cor-descricao">@{{ cor.DESCRICAO }}</td>
					@endif

					<td class="cor-condicao {{ $class_maior }}">@{{ cor.CONDICAO }}</td>

				</tr>					
			</tbody>
		</table>
	</div>
</div>

<ul class="legenda">
	<li>
		<div class="cor-legenda"></div>
		<div class="texto-legenda">Cores mais pedidos por você</div>
	</li>
</ul>

@overwrite