@extends('helper.include.view.modal', ['id' => 'modal-demonstrativo-depreciacao-anual-parcela', 'class_size' => 'modal-big'])

@section('modal-header-left')

<h4 class="modal-title">
    Detalhamento das Percelas
</h4>

@overwrite

@section('modal-header-right')

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

@overwrite

@section('modal-body')

        <div class="form-group" ng-init="vm.DemonstrativoDepreciacaoAnual.FILTER_PARCELA = 0">
            <label>Filtrar parcela:</label>             
            <div class="check-group" style="background: rgba(226, 226, 226, 0.42)">
                <label class="lbl">
                    <input type="radio" ng-click="vm.DemonstrativoDepreciacaoAnual.FILTER_PARCELA = 0" ng-checked="vm.DemonstrativoDepreciacaoAnual.FILTER_PARCELA == 0">
                    <span style="">Todas</span>
                </label>
                <label class="lbl">
                    <input type="radio" ng-click="vm.DemonstrativoDepreciacaoAnual.FILTER_PARCELA = 1" ng-checked="vm.DemonstrativoDepreciacaoAnual.FILTER_PARCELA == 1">
                    <span style="color:rgb(68, 157, 68)">Primeira</span>
                </label>
                <label class="lbl">
                    <input type="radio" ng-click="vm.DemonstrativoDepreciacaoAnual.FILTER_PARCELA = 2" ng-checked="vm.DemonstrativoDepreciacaoAnual.FILTER_PARCELA == 2">
                    <span style="color:rgb(201, 48, 44)">Última</span>
                </label>
            </div>
        </div> 

    <style>
        .depre-inicio {
            color: rgb(68, 157, 68);
            font-weight: bold;
        }
        
        .depre-fim {
            color: rgb(201, 48, 44);
            font-weight: bold;
        }

    </style>

    <div class="table-ec" style="max-height: calc(100vh - 220px);">
        <table class="table table-striped table-bordered">
            <thead>
                <tr ng-init="vm.DemonstrativoDepreciacaoAnual.ORDER_BY = 'PARCELA'" gc-order-by="vm.DemonstrativoDepreciacaoAnual.ORDER_BY">
                    <th field="IMOBILIZADO_ID*1">Imobilizado</th>
                    <th field="PRODUTO_DESCRICAO">Produto</th>
                    <th field="DEPRECIACAO_INICIO" class="text-center">Depreciação Inicio</th>
                    <th field="DEPRECIACAO_FIM" class="text-center">Depreciação Fim</th>
                    <th field="PARCELA*1" class="text-center">Parcela</th>
                    <th field="VALOR*1" class="text-right">Valor Parcela</th>
                </tr>
            </thead>
            <tbody>
                <tr 
                    ng-if="
                    vm.DemonstrativoDepreciacaoAnual.FILTER_PARCELA == 0 ? true : 
                        (vm.DemonstrativoDepreciacaoAnual.FILTER_PARCELA == 1 ? (imobilizado.PARCELA == 1) : 
                            (vm.DemonstrativoDepreciacaoAnual.FILTER_PARCELA == 2 ? (imobilizado.PARCELA == imobilizado.PARCELAS) : false)
                        )
                    
                    "
                    ng-repeat="imobilizado in vm.DemonstrativoDepreciacaoAnual.SELECTEDS | orderBy : vm.DemonstrativoDepreciacaoAnual.ORDER_BY
                    ">
                    <td> <a href ng-click="vm.Imobilizado.visualizar(imobilizado.IMOBILIZADO_ID)">@{{ imobilizado.IMOBILIZADO_ID | lpad: [4,0] }} - @{{ imobilizado.IMOBILIZADO_DESCRICAO }}</a></td>
                    <td>@{{ imobilizado.PRODUTO_ID | lpad: [6,0] }} - @{{ imobilizado.PRODUTO_DESCRICAO }}</td>
                    <td class="text-center">@{{ imobilizado.DEPRECIACAO_INICIO_TEXT }}</td>
                    <td class="text-center">@{{ imobilizado.DEPRECIACAO_FIM_TEXT }}</td>
                    <td class="text-center">
                        <span
                            ng-class="{
                                'depre-inicio' : imobilizado.PARCELA == 1,
                                'depre-fim' : imobilizado.PARCELA == imobilizado.PARCELAS
                            }"
                            >
                        @{{ imobilizado.PARCELA | lpad: [3,0] }}/@{{ imobilizado.PARCELAS | lpad: [3,0] }}
                        </span>
                    </td>
                    <td class="text-right">R$ @{{ imobilizado.VALOR | number: 2 }}</td>
                </tr>
            </tbody>
        </table>                                    
    </div>

@overwrite