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

@section('modal-start')
    <form class="form-inline" ng-submit="vm.Composicao.confirmar()">
@overwrite

@section('modal-header-left')

	<h4 class="modal-title">
		Composição
	</h4>

@overwrite

@section('modal-header-right')
    <button type="submit" class="btn btn-warning" data-hotkey="alt+e" ng-click="vm.Composicao.modalEtiqueta()" data-loading-text="Confirmando...">
        <span class="glyphicon glyphicon-print"></span> 
        Imprimir Etiqueta
    </button>

    <button type="button" class="btn btn-success" data-hotkey="alt+r" ng-click="vm.Composicao.processar()">
        <span class="glyphicon glyphicon-tasks"></span>
        Reprocessar Composição
    </button>
    

    <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>
    <style>
        #modal-composicao .modal-body {    
            height: calc(100vh - 65px);
        }
    </style>
    
    <div style="width:100%">
        
        <fieldset id="roteiro" style="margin-bottom: 0;">
            <legend>Roteiro da Composição</legend>
            <div class="table-group">
                <!--<input type="text" ng-model="vm.Composicao.MODEL_COMPOSICAO_FILTRO" placeholder="Filtragem rápida..." style="width: 100%;height: 23px;margin-bottom: 5px;"/>-->
                <div class="table-ec" style="height: calc(100vh - 213px/*194px*/);max-height: fit-content;">
                    <table class="table table-hover table-striped table-bordered table-condensed">
                        <thead>
                            <tr>
                                <th 
                                    style="width: 27px;" 
                                    ng-click="
                                        vm.Composicao.CHK = (vm.Composicao.CHK == true) ? false : true; 
                                        vm.forApply(vm.Composicao.DADOS.COMPOSICOES,'CHK',vm.Composicao.CHK);"
                                    >
                                    <i style="font-size: 17px;" class="check fa" ng-class="vm.Composicao.CHK == true ? 'fa-check-square-o' : 'fa-square-o'"></i>
                                </th>   
                                <th style="width:1%"></th>
                                <th>Linha</th>
                                <th>Cor</th>
                                <th class="text-center">Tam.</th>
                                <th class="text-right">Qtd.</th>
                                
                            </tr>
                        </thead>
                        <tbody ng-init="vm.Composicao.MODEL_COMPOSICAO_ORDER_BY = ['-TAMANHO_DESCRICAO','COR_DESCRICAO']">
                            <tr 
                                tabindex="0"
                                style="background: rgb(212, 212, 212);" 
                                ng-repeat-start="comp in vm.Composicao.DADOS.COMPOSICOES" 
                                ng-keydown="$event.key == ' ' && (comp.CHK = comp.CHK == true ? false : true); $event.key == ' ' && $event.preventDefault();"
                                ng-if="comp.FILTERED.length > 0">
                                <td ng-click="comp.CHK = comp.CHK == true ? false : true">
                                    <i style="font-size: 17px;" class="check fa" ng-class="comp.CHK == true ? 'fa-check-square-o' : 'fa-square-o'"></i>
                                </td>                                
                                <td>
                                    <i class="fa fa-circle" ng-class="{
                                        'color-red'  : comp.STATUS == 0,
                                        'color-orange' : comp.STATUS == 1,
                                        'color-blue' : comp.STATUS == 2,
                                        'color-green' : comp.STATUS == 3,
                                    }"></i>
                                </td>
                                <td class="normal-case">Seq. @{{ comp.SEQUENCIA | lpad: [2,0] }}</td>
                                <td colspan="2">@{{ comp.CUBAGEM_PRODUTO_ID || 0 | lpad : [5,0] }} - @{{ comp.CUBAGEM_PRODUTO_DESCRICAO }}</td>
                                <td class="text-right">@{{ comp.QUANTIDADE_SALDO | number : 0 | lpad : [3,0] }} / @{{ comp.QUANTIDADE | number : 0 | lpad : [3,0] }}</td>
                            </tr>
                            
                            <tr 
                                ng-repeat="item in comp.FILTERED = (comp.ITENS | find: { model: vm.Composicao.MODEL_COMPOSICAO_FILTRO, fields : 'all' })">
                                <td>
                                    <span
                                    ng-if="item.VINCULOS.length > 0"
                                    class="glyphicon glyphicon-info-sign" 
                                    data-toggle="popover" 
                                    data-placement="right" 
                                    title="Informações"
                                    data-element-content="#info-origem-@{{ item.ID }}"
                                    ></span>
                                    <div id="info-origem-@{{ item.ID }}" style="display: none">
                                        <table class="table table-condensed table-striped table-bordered table-hover">
                                            <thead>
                                                <tr>
                                                    <th>Nº Talão</th>
                                                    <th>Qtd.Prd.</th>
                                                    <th>Qtd.Util.</th>
                                                    <th>Qtd.Saldo</th>
                                                    <th>Dt/Hr Prd.</th>
                                                    <th>Dt/Hr Util.</th>
                                                    <th>Operador</th>
                                                    <th></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr ng-repeat="vinculo in item.VINCULOS">
                                                    <td>@{{ vinculo.REMESSA_TALAO_DETALHE_ID }}</td>
                                                    <td>@{{ vinculo.QUANTIDADE_PRODUCAO | number: 0 }}</td>
                                                    <td>@{{ vinculo.QUANTIDADE_VINCULO | number: 0 }}</td>
                                                    <td>@{{ vinculo.QUANTIDADE_SALDO | number: 0 }}</td>
                                                    <td>@{{ vinculo.DATAHORA_PRODUCAO }}</td>
                                                    <td>@{{ vinculo.DATAHORA }}</td>
                                                    <td>@{{ vinculo.OPERADOR_ID }} - @{{ vinculo.OPERADOR_DESCRICAO }}</td>
                                                    <td style="padding: 0">
                                                        <button class="btn btn-danger btn-xs" data-vinculo-id="@{{ vinculo.ID }}" ng-click="vm.Composicao.vinculoExcluir()">
                                                            <span class="glyphicon glyphicon-trash"></span> Excluir
                                                        </button>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>     
                                </td>
                                <td>
                                    <i class="fa fa-circle" ng-class="{
                                        'color-red'  : item.QUANTIDADE_SALDO == 0,
                                        'color-blue' : item.QUANTIDADE_SALDO > 0 && item.QUANTIDADE_SALDO <  item.QUANTIDADE,
                                        'color-green' : item.QUANTIDADE_SALDO == item.QUANTIDADE
                                    }"></i>
                                </td>
                                <td>@{{ item.LINHA_ID | lpad:[3,0] }} - @{{ item.LINHA_DESCRICAO }}</td>
                                <td>@{{ item.COR_ID | lpad : [4,0] }} - @{{ item.COR_DESCRICAO }}</td>
                                <td class="text-center">@{{ item.TAMANHO_DESCRICAO }}</td>
                                <td class="text-right">@{{ item.QUANTIDADE_SALDO | number : 0 | lpad : [3,0] }} / @{{ item.QUANTIDADE | number : 0 | lpad : [3,0] }}</td>
                            </tr>                            
                            
                            <tr ng-repeat-end ng-if="false"></tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <ul class="legenda-ec">
                <li>
                    <span>Composição: </span>    
                </li>
                <li>
                    <i class="fa fa-circle" style="color: red"></i>
                    <span>Não iniciada</span>
                </li>
                <li>
                    <i class="fa fa-circle" style="color: orange"></i>
                    <span>Parada</span>
                </li>
                <li>
                    <i class="fa fa-circle" style="color: blue"></i>
                    <span>Em andamento</span>
                </li>
                <li>
                    <i class="fa fa-circle" style="color: green"></i>
                    <span>Concluída</span>
                </li>
            </ul>            
        </fieldset>
        
    </div>
    
</div>

@overwrite

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