@extends('helper.include.view.modal', ['id' => 'modal-taloes-placa', 'class_size' => 'modal-big'])

@section('modal-start')
    <form class="form-inline" name="confirmarSaida" ng-submit="vm.TaloesPlaca.Gravar()">
@overwrite

@section('modal-header-left')

	<h4 class="modal-title">
        22120 - Geração de Talões de Placa
	</h4>

@overwrite

@section('modal-header-right')

    <button type="submit" class="btn btn-success" data-hotkey="f1" data-loading-text="Gravando...">
		<span class="glyphicon glyphicon-ok"></span> 
		Gravar
	</button>
	<button type="button" class="btn btn-default btn-voltar" data-dismiss="modal" data-hotkey="esc">
		<span class="glyphicon glyphicon-chevron-left"></span> 
		Voltar
	</button>

@overwrite

@section('modal-body')

    <style>
        table tbody td.t-status-1:before {
            background: rgb(68, 157, 68);
        }        
    </style>
    <fieldset class="fieldset-left">
        <legend>Percentual de Defeitos por Sku</legend>

        <!--
        <div class="form-group"
            style="position: absolute;
                    top: -17px;
                    left: calc(100vw - 257px);
                    display: inline-table;
                    background: #d5dcdc;
                    padding: 2px;
                    border: 1px solid #b5b9b9;
                    border-radius: 5px;">
                    
            <span class="glyphicon glyphicon-info-sign"  ttitle="% aplicado sobre base do Produto"></span>
            <span>% sobre Base: </span>

            <input 
                ng-init="vm.TaloesPlaca.PERC = 100;"
                string-to-number 
                type="number" 
                min="0"
                max="1000"
                step="any"
                class="form-control input-menor"
				ng-model="vm.TaloesPlaca.PERC"
                ng-change="vm.TaloesPlaca.recalcular($event,vm.TaloesPlaca);"
                ng-disabled="vm.TaloesPlaca.PERC2 > 0">
                
        </div>

        <div class="form-group"
            style="position: absolute;
                    top: -17px;
                    left: calc(100vw - 430px);
                    display: inline-table;
                    background: #d5dcdc;
                    padding: 2px;
                    border: 1px solid #b5b9b9;
                    border-radius: 5px;">

            <span class="glyphicon glyphicon-info-sign"  ttitle="Se 0 usa base do Produto e habilita '% sobre Base'"></span>
            <span>% Base: </span>
            
            <input 
                ng-init="vm.TaloesPlaca.PERC2 = 0;"
                string-to-number 
                type="number" 
                min="0"
                max="1000"
                step="any"
                class="form-control input-menor"
				ng-model="vm.TaloesPlaca.PERC2"
                ng-change="vm.TaloesPlaca.recalcular2($event,vm.TaloesPlaca);"
                >
                
        </div>
        -->
        
        <div class="table-ec" style="height: calc(100vh - 300px);">
            <table class="table-bordered table-striped table-hover table-condensed">
                <thead>
                    <tr>
                        <th style="width: 30px;"></th>
                        <th>Produto</th>
                        <th class="text-right">Largura</th>
                        <th class="text-right">Comprimento</th>
                        <th class="text-right">Quantidade</th>
                        <th class="text-right">Placas Remessa</th>
                        <th class="text-right">% Defeito</th>
                        <th class="text-right">Regra</th>
                        <th class="text-right">Placas Calculada</th>
                        <th class="text-right">Placas</th>
                        
                        <!-- <th class="text-right input" style="width: 1%;">Percentual</th> -->
                    </tr>
                </thead>
                <tbody>
                    <tr
                        ng-repeat="item in vm.TaloesPlaca.DADOS.SKUS | orderBy:['-PLACAS*1','PRODUTO_DESCRICAO', 'COMPRIMENTO*1']"
                        ng-click="vm.TaloesPlaca.DADOS.SELECTED = item"
                        ng-class="{'selected' : vm.TaloesPlaca.DADOS.SELECTED == item}"
                        >
                        <td style="padding: 0px; padding-left: 5px;"><input tabindex="-1" style="margin: 0px; width: 20px; height: 20px;" type="checkbox" style="position: static; display: inline-block;" class="form-group" ng-model="item.CHECKED" ng-click="$event.stopPropagation();" ng-dblclick="$event.stopPropagation();" ng-change="vm.CheckSelect();"></td>
                        <td>@{{ item.PRODUTO_ID  | lpad : [7,'0'] }} - @{{ item.PRODUTO_DESCRICAO }}</td>
                        <td class="text-right">@{{ item.LARGURA     | number: 4}}</td>
                        <td class="text-right">@{{ item.COMPRIMENTO | number: 4}}</td>
                        <td class="text-right">@{{ item.QUANTIDADE  | number: 0}} PR</td>
                        <td class="text-right">@{{ item.PLACAS      | number: 0}} PLC</td>
                        <td class="text-right">
                            @{{ item.PERCENTUAL_DEFEITO * 100 | number: 4 }} %
                        </td>
                        
                        <td class="text-right" ng-if="item.VALOR_TIPO <  0"></td>
                        <td class="text-right" ng-if="item.VALOR_TIPO == 1">@{{ item.VALOR | number: 0}} PLC</td>
                        <td class="text-right" ng-if="item.VALOR_TIPO == 2">@{{ item.VALOR | number: 2}} %</td>
                        
                        <td class="text-right" ng-if="item.VALOR_TIPO <  0">@{{ vm.TaloesPlaca.Aredondar((item.PERCENTUAL_BASE/100) * item.PLACAS, item)  | number: 0}} PLC</td>
                        <td class="text-right" ng-if="item.VALOR_TIPO >= 0">@{{ vm.TaloesPlaca.Aredondar((item.VALOR_TIPO == 1 ? (item.VALOR) : ((item.VALOR/100) * item.PLACAS)), item) | number: 0}} PLC</td>
                        
                        <td class="text-right input" style="padding: 1px 1px;">
                            <div class="form-group">
                                <div class="input-group">
                                    <input
                                        type="number"
                                        min="0"
                                        max="9999"
                                        step="1" 
                                        class="text-right item_valor_dig form-control"
                                        ng-model="item.QTD_PLACAS"
                                        ng-focus="vm.TaloesPlaca.DADOS.SELECTED = item"
                                        style=" padding: 5px; height: 25px; width: 100%;"
                                        ng-change="vm.TaloesPlaca.CalcularTotal();"
                                        ng-keydown="vm.TaloesPlaca.keydown(item, this, $event);"                               
                                    >
                                    <div class="input-group-addon" style="padding: 4px;">PLC</div>
                                </div>
                            </div>
                        </td>

                        <!--
                        <td class="text-right input" style="padding: 1px 1px;">
                            <input
                                type="number"
                                min="0"
                                max="9999"
                                step="0.0001"
                                class="text-right item_valor_dig"
                                ng-model="item.PERCENTUAL_BASE"
                                ng-focus="vm.TaloesPlaca.DADOS.SELECTED = item"
                                style=" padding: 5px; height: 25px; width: 100%;"
                                ng-keydown="vm.TaloesPlaca.keydown(item, this, $event);"                               
                            >
                        </td>
                        -->
                    </tr>  

                    <tr class="tr-fixed-1"  style="background-color: #b2b6b6; position: static; bottom: 0px;">
                        <td class="campo-total-tab row-fixed row-fixed-1 text-right" style="text-align: center;" colspan="4">Total</td>
                        <td class="campo-total-tab row-fixed row-fixed-1 text-right">@{{ vm.TaloesPlaca.TOTAL.QUANTIDADE  | number: 0}} PR</td>
                        <td class="campo-total-tab row-fixed row-fixed-1 text-right">@{{ vm.TaloesPlaca.TOTAL.PLACAS      | number: 0}} PLC</td>
                        <td class="campo-total-tab row-fixed row-fixed-1 text-right">@{{ vm.TaloesPlaca.TOTAL.PERCENTUAL_DEFEITO * 100 | number: 4 }} %</td>
                        <td class="campo-total-tab row-fixed row-fixed-1 text-right">@{{ (vm.TaloesPlaca.TOTAL.PLACAS_CALC /vm.TaloesPlaca.TOTAL.PLACAS) * 100 | number: 4 }} %</td>
                        <td class="campo-total-tab row-fixed row-fixed-1 text-right">@{{ vm.TaloesPlaca.TOTAL.PLACAS_CALC | number: 0}} PLC</td>
                        <td class="campo-total-tab row-fixed row-fixed-1 text-right">@{{ vm.TaloesPlaca.TOTAL.QTD_PLACAS  | number: 0 }} PLC</td>
                    </tr> 

                </tbody>
            </table>
        </div>
     
    </fieldset>

@overwrite

@section('modal-end')
    </form>
@overwrite