@extends('helper.include.view.modal', ['id' => 'modal-PlacaAvulsa', 'class_size' => 'modal-lg'])

@section('modal-start')
    <form class="form-inline" submit="">
@overwrite

@section('modal-header-left')

<h4 class="modal-title">
	<span>22550 - Entrada Avulsa de Placas</span>
</h4>

@overwrite

@section('modal-header-right')
<!--
	<button ng-if="vm.PlacaAvulsa.ALTERANDO" type="submit" class="btn btn-success" data-hotkey="f1">
        <span class="glyphicon glyphicon-ok"></span> Gravar
    </button>
-->
	<button ng-if="vm.PlacaAvulsa.ALTERANDO" ng-click="vm.PlacaAvulsa.cancelar()" type="button" class="btn btn-danger btn-cancelar" data-hotkey="esc">
        <span class="glyphicon glyphicon-ban-circle"></span> Cancelar
    </button>
	
	<button ng-disabled="{{ userMenu($menu)->ALTERAR }} == 0" ng-if="!vm.PlacaAvulsa.ALTERANDO" ng-click="vm.PlacaAvulsa.alterar()" type="button" class="btn btn-primary" data-hotkey="f9">
        <span class="glyphicon glyphicon-edit"></span> Alterar
    </button>   
	
	<button ng-disabled="{{ userMenu($menu)->EXCLUIR }} == 0" ng-if="!vm.PlacaAvulsa.ALTERANDO" ng-click="vm.PlacaAvulsa.excluir()" type="button" class="btn btn-danger" data-hotkey="f12">
        <span class="glyphicon glyphicon-trash"></span> Excluir
    </button>
	
	<button ng-if="!vm.PlacaAvulsa.ALTERANDO" type="button" class="btn btn-default btn-fechar-modal btn-voltar" ng-click="vm.PlacaAvulsa.fecharModal()" data-hotkey="esc">
		<span class="glyphicon glyphicon-chevron-left"></span> Voltar
    </button>	

@overwrite

@section('modal-body')
<div style="height: calc(100vh - 230px);">
    <div class="row">
	
		<div style="display: -webkit-inline-box;" class="consulta-cor"      ></div>
		<div style="display: -webkit-inline-box;" class="consulta-densidade"></div>
		<div style="display: -webkit-inline-box;" class="consulta-espessura"></div>
		<div style="display: -webkit-inline-box;" class="consulta-modeloorigem"></div>

		<div class="form-group">
			<label >Dimensões:</label>
			<input 
				required
				class="form-group input-menor input-largura"
				style="text-align: right; margin-right: 0px;"
				step="0.0001" 
				min="0"
				type="number" 
				ng-model="vm.PlacaAvulsa.SELECTED.LARGURA"
				>
				
			<div style="display: inline-flex; padding: 6px;">X</div>

			<input required
				class="form-group input-menor input-comprimento"
				style="text-align: right;"
				step="0.0001"
				min="0"
				type="number"
				ng-model="vm.PlacaAvulsa.SELECTED.COMPRIMENTO"
			>		
		</div>

		<div class="form-group">
			<label >Quantidade:</label>
			<input required class="form-group input-menor" style="text-align: right;"
			max="1000" step="1" min="0" type="number" ng-model="vm.PlacaAvulsa.SELECTED.QUANTIDADE">		
		</div>
		
		<div style="display: none" class="consulta-enderecamento2"></div>

		<div style="display: flex;
                    height: calc(100vh - 500px);
                    overflow: auto;
                    border: 1px solid #948e8e;
                    margin-top: 10px;
					border-radius: 5px;">

            <div class="grupo" style="width: 150px; display: inline-block;" ng-repeat="grupos in vm.PlacaAvulsa.GRUPO | orderBy : ['GRUPO']">
                <div style="height: 70px;
                            border: 1px solid #c8c8c8;
                            border-radius: 7px;
                            padding: 3px;
                            margin: 5px;
                            box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
                            cursor: pointer;"
                    class="subgrupo"
                    ng-repeat="grupo in grupos.COLLECTION | orderBy : ['SUBGRUPO']" ng-click="vm.PlacaAvulsa.PreGravarEntrada(grupo)">
                    <div style="font-size: 20px;" ttitle="Saldo:@{{grupo.SALDO | number:2}}<br>Capacidade:@{{grupo.CAPACIDADE | number:2}}<br>Usado:@{{grupo.USADO | number:2}}">@{{grupo.GRUPO}}-@{{grupo.SUBGRUPO}}</div>
                    <div class="progress" style="height: 25px; margin-top: 6px; border: 1px solid #bebdbd;">
                        <div class="progress-bar" role="progressbar" aria-valuenow="@{{grupo.PERCENTUAL2}}" aria-valuemin="0" aria-valuemax="100" style="width: @{{grupo.PERCENTUAL2}}%; font-size: 20px; font-weight: bold; padding: 2px; @{{ Number(grupo.SALDO) < Number(vm.Placas.OBJ_ENTRADA_SAIDA.DADOS.QUANTIDADE) ? 'background-color: #fe6c6c;' : ''}}">
                            @{{grupo.PERCENTUAL | number:2}}%
                        </div>
                    </div>
                </div>
            </div>
        </div>

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

@overwrite