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

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

@section('modal-header-left')

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

@overwrite

@section('modal-header-right')

    <button type="submit" class="btn btn-success" data-hotkey="f10" 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: -60px;
                    width: 206px;
                    left: calc(50vw - 245px);
                    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 Modelo/Cor"></span>
            <span>% sobre Base: </span>

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

        <div class="form-group"
            style="position: absolute;
                    top: -60px;
                    left: calc(50vw - 415px);
                    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 Modelo/Cor e habilita '% sobre Base'"></span>
            <span>% Base: </span>
            
            <input 
                ng-init="vm.TaloesExtra.PERC2 = 0;"
                string-to-number 
                type="number" 
                min="0"
                max="1000"
                step="any"
                class="form-control input-menor"
				ng-model="vm.TaloesExtra.PERC2"
                ng-change="vm.recalcular2($event,vm.TaloesExtra);"
                >
                
        </div>
        
        <div class="table-ec" style="height: calc(100vh - 190px);">
            <table class="table-bordered table-striped table-hover table-condensed">
                <thead>
                    <tr>
                        <th ttitle="Os itens maracados com um círculo são itens de estoque mínimo, e que o percentual extra não será aplicado">Est. Mín.</th>
                        <th>Modelo</th>
                        <th>Cor</th>
                        <th>Tam.</th>
                        <th>Den.</th>
                        <th>Esp.</th>
                        <th class="text-right">% Base</th>
                        <th class="text-right input" style="width: 1%;">Percentual</th>
                    </tr>
                </thead>
                <tbody>
                    <tr
                        ng-repeat="item in vm.TaloesExtra.DADOS.SKUS | orderBy:['-PERCENTUAL_BASE*1','MODELO_DESCRICAO', 'COR_DESCRICAO', 'TAMANHO_DESCRICAO*1']"
                        ng-click="vm.TaloesExtra.DADOS.SELECTED = item"
                        ng-class="{'selected' : vm.TaloesExtra.DADOS.SELECTED == item}"
                        >
                        <td class="t-status t-status-@{{ item.ESTOQUE_MINIMO }}" ></td>
                        <td>@{{ item.MODELO_ID | lpad : [4,'0'] }} - @{{ item.MODELO_DESCRICAO }}</td>
                        <td>@{{ item.COR_ID | lpad : [4,'0'] }} - @{{ item.COR_DESCRICAO }}</td>
                        <td>@{{ item.TAMANHO_DESCRICAO }}</td>
                        <td class="text-right">@{{ item.DENSIDADE }}</td>
                        <td class="text-right">@{{ item.ESPESSURA }}</td>
                        <td class="text-right">
                            @{{ item.PERCENTUAL_BASE | number: 2 }} %


                            <span class="glyphicon glyphicon-info-sign operacao-descricao"
                            data-toggle="popover" 
                            data-placement="right" 
                            title="Base do Percentual de Defeitos por Remessa"
                            data-element-content="#sku-@{{ item.MODELO_ID + '-' + item.COR_ID + '-' + item.TAMANHO }}"
                            on-finish-render="bs-init"></span>    
                            <div id="sku-@{{ item.MODELO_ID + '-' + item.COR_ID + '-' + item.TAMANHO }}" style="display: none">
                                <table class="table table-striped table-bordered" style="margin-bottom: 10px">
                                    <thead>
                                        <tr>
                                            <th>Remessa</th>
                                            <th>Data Remessa</th>
                                            <th class="text-center" title="Data e Hora do Ultimo Talão Produzido">Dt./Hr. Ult. Tal.</th>
                                            <th title="Quantidade produzida">Qtd. Prod.</th>
                                            <th title="Quantidade defeitos">Qtd. Def.</th>
                                            <th title="Percentual de Defeitos">% Def.</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr ng-repeat="defeito in item.DEFEITO_ORIGEM">
                                            <td>@{{ defeito.REMESSA_ID }}</td>
                                            <td>@{{ defeito.REMESSA_DATA | parseDate | date:'dd/MM/yy' }}</td>
                                            <td class="text-center">@{{ defeito.DATAHORA | parseDate | date:'HH:mm:ss dd/MM/yy' }}</td>
                                            <td class="text-right">@{{ defeito.QUANTIDADE_PRODUCAO | number: 0 }}</td>
                                            <td class="text-right">@{{ defeito.QUANTIDADE_DEFEITO | number: 0 }}</td>
                                            <td class="text-right">@{{ defeito.PERCENTUAL_DEFEITO * 100 | number: 2 }} %</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </td>
                        <td class="text-right input" style="padding: 1px 1px;">
                            <input
                                type="number" 
                                min="0" 
                                class="text-right"
                                step="any"
                                string-to-number 
                                ng-model="item.PERCENTUAL" 
                                ng-value="item.PERCENTUAL_BASE"
                                ng-focus="vm.TaloesExtra.DADOS.SELECTED = item"
                                style="
                                   padding: 0px;
                                   height: 25px;
                                   width: 100%;
                               "                                
                            >
                        </td>
                    </tr>  
                </tbody>
            </table>
        </div>
    </fieldset>
    <fieldset class="fieldset-right">
        <legend>Talões Extras</legend>
        <div class="table-ec" style="height: calc(100vh - 190px);">
            <table class="table-bordered table-striped table-hover table-condensed">
                <thead>
                    <tr>
                        <th title="Grupo de Produção">GP</th>
                        <th>Modelo</th>
                        <th>Cor</th>
                        <th>Tam.</th>
                        <th class="text-right" title="Quantidade total do sku para o Grupo de Produção">Qtd. Total</th>
                        <th class="text-right" title="Quantidade total a ser gerado">Qtd. Total + %</th>
                    </tr>
                </thead>
                <tbody>
                    <tr
                        ng-repeat="item in vm.TaloesExtra.DADOS.TALOES_EXTRA | orderBy:['GP_DESCRICAO', 'MODELO_DESCRICAO', 'COR_DESCRICAO', 'TAMANHO_DESCRICAO*1']"
                        tabindex="0"
                        ng-class="{'selected' : vm.TaloesExtra.DADOS.SELECTED == item.EXTEND}"
                        ng-click="vm.TaloesExtra.DADOS.SELECTED = item.EXTEND"
                        ng-focus="vm.TaloesExtra.DADOS.SELECTED = item.EXTEND"
                        data-calc-1="@{{ item.QUANTIDADE = vm.Math.ceil((item.QUANTIDADE_TOTAL_TALOES * item.EXTEND.PERCENTUAL) / 100) }}"
                        data-calc-2="@{{ item.PERCENTUAL = item.EXTEND.PERCENTUAL }}"
                        >
                        <td>@{{ item.GP_ID | lpad : [3,'0'] }} - @{{ item.GP_DESCRICAO }}</td>
                        <td>@{{ item.MODELO_ID | lpad : [4,'0'] }} - @{{ item.MODELO_DESCRICAO }}</td>
                        <td>@{{ item.COR_ID | lpad : [4,'0'] }} - @{{ item.COR_DESCRICAO }}</td>
                        <td>@{{ item.TAMANHO_DESCRICAO }}</td>
                        <td class="text-right">@{{ item.QUANTIDADE_TOTAL_TALOES | number: 0 }}</td>
                        <td class="text-right">@{{ item.QUANTIDADE | number: 0 }}</td>
                    </tr>  
                </tbody>
                <tfoot>
                    <td colspan="4">Total</td>
                    <td class="text-right">@{{ vm.summary(vm.TaloesExtra.DADOS.TALOES_EXTRA,'QUANTIDADE_TOTAL_TALOES','sum') | number : 0 }}</td>
                    <td class="text-right">@{{ vm.summary(vm.TaloesExtra.DADOS.TALOES_EXTRA,'QUANTIDADE','sum') | number : 0 }}</td>

                </tfoot>
            </table>
        </div>
    </fieldset>

@overwrite

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