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

@section('modal-header-left')

<h4 class="modal-title">
    Eficiência
</h4>

@overwrite

@section('modal-header-right')

    <button type="button" class="btn btn-primary tempo-producao" ng-click="vm.TalaoProduzido.eficacia2()">
        <span class="glyphicon glyphicon-search"></span>
        Detalhar Justificativas
    </button>

    <button type="button" class="btn btn-default btn-voltar" data-dismiss="modal" data-hotkey="esc" tabindex="-1">
        <span class="glyphicon glyphicon-chevron-left"></span> 
        Voltar
    </button>

@overwrite

@section('modal-body')

<div class="div-row">

    <div class="table-talao-produzido table-ec" id="table-talao-produzido">
        <table class="table table-striped table-bordered table-condensed table-hover table-no-break">
            <thead>
                <tr>              
                    <th style="text-align: center;">Data</th>
                    <th style="text-align: left; ">UP</th>
                    <th style="text-align: left; ">Estação</th>
                    <th style="text-align: right;" ttitle="Tempo Disponível em minutos">Disponível</th>
                    <th style="text-align: right;" ttitle="Tempo Trabalhado em minutos">Trabalhado</th>
                    <th style="text-align: right;" ttitle="Tempo Trabalhado / Tempo Disponível">%</th>
                    <th style="text-align: right;" ttitle="Tempo Ocioso em minutos">Ocioso</th>
                    <th style="text-align: right;" ttitle="Tempo Ocioso / Tempo Disponível">%</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="item in vm.TalaoProduzido.EFICACIA" tabindex="0" >
                    <td style="text-align: center;">@{{ item.DATA    }}</td>
                    <td style="text-align: left;  ">@{{ item.UP      }}</td>
                    <td style="text-align: left;  ">@{{ item.ESTACAO }}</td>
                    <td style="text-align: right; ">@{{ item.DISPONIVEL   | number:0 }} min</td>
                    <td style="text-align: right; ">@{{ item.TRABALHADO   | number:0 }} min</td>
                    <td style="text-align: right; ">@{{ ((item.TRABALHADO / item.DISPONIVEL) * 100) | number:2 }} %</td>
                    <td style="text-align: right; ">@{{ item.PARADO       | number:0 }} min</td>
                    <td style="text-align: right; ">@{{ ((item.PARADO     / item.DISPONIVEL) * 100) | number:2 }} %</td>
                </tr>

                <tr tabindex="0" style="background-color: #a2a2a2; color: white; font-weight: bold;">
                    <td style="text-align: center;" colspan="3">Total</td>
                    <td style="text-align: right; ">@{{ vm.TalaoProduzido.total.DISPONIVEL   | number:0 }} min</td>
                    <td style="text-align: right; ">@{{ vm.TalaoProduzido.total.TRABALHADO   | number:0 }} min</td>
                    <td style="text-align: right; ">@{{ ((vm.TalaoProduzido.total.TRABALHADO / vm.TalaoProduzido.total.DISPONIVEL) * 100) | number:2 }} %</td>
                    <td style="text-align: right; ">@{{ vm.TalaoProduzido.total.PARADO       | number:0 }} min</td>
                    <td style="text-align: right; ">@{{ ((vm.TalaoProduzido.total.PARADO     / vm.TalaoProduzido.total.DISPONIVEL) * 100) | number:2 }} %</td>
                </tr>
            </tbody>
        </table>
    </div>

    <fieldset class="programacao talao-produzido-ativo">
        <div class="totalizador-produzido">
            <div class="panel panel-warning">
                <div class="panel-heading">
                    <label title="Quantidade Projetada">Qtd. Proj.</label>
                    <label title="Quantidade Produzida">Qtd. Prod.</label>
                    <label title="Quantidade de Defeitos">Qtd. Defeito.</label>
                    <label title="Pares produzidos" ng-if="vm.ConsultaGp.GP_VER_PARES">Pares Prod.</label>
                    <label title="Tempo previsto">Temp. Prev.</label>
                    <label title="Tempo realizado">Temp. Real.</label>
                    <label title="Eficiência">Eficiência</label>
                </div>
                <div class="panel-body" style="text-transform: lowercase; display: flex; padding: 1px 2px;">
                    <label class="qtd">@{{ vm.TalaoProduzido.TOTALIZADOR.QUANTIDADE_PROJETADA | number: 4 }} @{{ vm.TalaoProduzido.TOTALIZADOR.QUANTIDADE_UM }}</label>
                    <label class="qtd-produzida">@{{ vm.TalaoProduzido.TOTALIZADOR.QUANTIDADE_PRODUZIDA | number: 4 }} @{{ vm.TalaoProduzido.TOTALIZADOR.QUANTIDADE_UM }}</label>
                    <label class="qtd-produzida" style="color: #bb0c0c;">@{{ vm.TalaoProduzido.TOTALIZADOR.QTD_DFEITO | number: 4 }} @{{ vm.TalaoProduzido.TOTALIZADOR.QUANTIDADE_UM }}</label>
                    <label ng-if="vm.ConsultaGp.GP_VER_PARES" class="pares">@{{ vm.TalaoProduzido.TOTALIZADOR.PAR_PRODUZIDO | number : 0 }} prs</label>
                    <label class="tempo">@{{ vm.TalaoProduzido.TOTALIZADOR.TEMPO_PREVISTO | number: 4 }} min</label>
                    <label class="tempo-producao">@{{ vm.TalaoProduzido.TOTALIZADOR.TEMPO_REALIZADO | number: 4 }} min</label>
                    <label class="tempo-producao cor-efic-@{{((vm.TalaoProduzido.TOTALIZADOR.TEMPO_PREVISTO / vm.TalaoProduzido.TOTALIZADOR.TEMPO_REALIZADO) * 100) >= 100 ? 'verde' : 'vermelho'}}">@{{ ((vm.TalaoProduzido.TOTALIZADOR.TEMPO_PREVISTO / vm.TalaoProduzido.TOTALIZADOR.TEMPO_REALIZADO) * 100) | number: 2 }} %</label>
                </div>
            </div>
        </div>
    </fieldset>
</div>

@overwrite