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

@section('modal-start')
    
@overwrite

@section('modal-header-left')

<label class="status-ec" ttitle="Clique aqui para alterar">
    <input 
        type="checkbox" 
        ng-checked="vm.Produto.SELECTED.STATUS == '1'"        
        ng-true-value="1"
        ng-false-value="0"
        ng-click="vm.Produto.SELECTED.STATUS = vm.Produto.SELECTED.STATUS == 1 ? 0 : 1"
        ng-disabled="!vm.Produto.ALTERANDO"
        />
    <div></div>
</label>

<h4 class="modal-title" style="display: inline-block">
    
    Produto: @{{ vm.Produto.SELECTED.ID || 0 | lpad : [5,0] }} - @{{ vm.Produto.SELECTED.DESCRICAO }}
</h4>

@overwrite

@section('modal-header-right')



@overwrite

@section('modal-body')

    <div>
        <form class="form-inline" ng-submit="vm.Produto.confirmar();">
        <style>
            .modal.master-modal-full .modal-dialog form {
                height: initial;
            }

            .btn.btn-primary.btn-toggle-acoes-modal.exibir {
                display: none !important;
            }
        </style>
        <div class="modal-header-right" style="
                position: fixed;
                top: 53px;
                right: 16px;         
            ">
            <button ng-if="vm.Produto.ALTERANDO" type="submit"  class="btn btn-success" data-hotkey="f10">
                <span class="glyphicon glyphicon-ok"></span> Gravar
            </button>

            <button ng-if="vm.Produto.ALTERANDO" ng-click="vm.Produto.cancelar()" type="button" class="btn btn-danger btn-cancelar" data-hotkey="f11">
                <span class="glyphicon glyphicon-ban-circle"></span> Cancelar
            </button>

            <button ng-if="!vm.Produto.ALTERANDO" ng-click="vm.Produto.alterar()" type="button" class="btn btn-primary" data-hotkey="f9">
                <span class="glyphicon glyphicon-edit"></span> Alterar
            </button>

            <button ng-if="!vm.Produto.ALTERANDO" ng-click="vm.Produto.excluir()" type="button" class="btn btn-danger" data-hotkey="f12">
                <span class="glyphicon glyphicon-trash"></span> Excluir
            </button>

            <button ng-if="!vm.Produto.INCLUINDO" data-consulta-historico data-tabela="TBPCM_PRODUTO" data-tabela-id="@{{ vm.Produto.SELECTED.ID }}" type="button" class="btn gerar-historico" data-hotkey="alt+h">
                <span class="glyphicon glyphicon-time"></span> {{ Lang::get('master.historico') }}
            </button>

            <button ng-if="!vm.Produto.ALTERANDO" 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>
        </div>
    <style>
        .tabs-left > .nav-tabs {
          width: calc(@{{ vm.getBigger(vm.View.TABS,'DESCRICAO').length * 6 }}px + 10px);
        }

        .tabs-left > .tab-content {
            width : calc(100% - @{{ vm.getBigger(vm.View.TABS,'DESCRICAO').length * 6 }}px - 10px );
        }        
    </style>

          <div class="tabbable tabs-left">
            <ul class="nav nav-tabs" ng-init="vm.View.TAB_SELECTED = vm.View.TABS[0]">
                <li ng-repeat="tab in vm.View.TABS track by $index" ng-click="vm.View.TAB_SELECTED = tab" ng-class="{'active' : tab == vm.View.TAB_SELECTED}">
                    <a data-hotkey="alt+@{{ $index+1 }}" href>@{{ tab.DESCRICAO }}</a>
                </li>
            </ul>
            <div class="tab-content">

                <div class="tab-pane active" ng-show="vm.View.TAB_SELECTED.ID == 'geral'" id="tab-@{{ vm.View.TAB_SELECTED.ID }}">
                    
                    

                    
                    
                    
                    
                    
                        <div class="row">
                            <div class="form-group">
                                <label>ID</label>
                                <input type="text" class="form-control input-menor" disabled required value="@{{ vm.Produto.SELECTED.ID || 0 | lpad : [5,0] }}">
                            </div>

                            <div class="form-group">
                                <label ttitle="Identificação simplicada do produto">Tag:</label>
                                <input 
                                    uppercase
                                    type="text" 
                                    class="form-control input-menor" 
                                    required
                                    ng-readonly="!vm.Produto.ALTERANDO"
                                    ng-model="vm.Produto.SELECTED.DESCRICAO" >
                            </div>

                            <div class="consulta-inline consulta-tipo"></div>
    <!--                        <div class="form-group consulta_gp_grup_forme">
                                <label for="consulta-descricao">Tipo:</label>
                                <div class="input-group consulta_gp_grup">               
                                    <input type="search" class="form-control consulta-descricao input-maior objConsulta consulta_gp_grup_Input" >
                                    <button type="button" class="input-group-addon btn-filtro btn-filtro-consulta search-button consulta_gp_grup_button" tabindex="-1" style="display: block !important;">
                                        <span class="fa fa-search"></span>
                                    </button>
                                </div>        
                            </div>-->
                        </div>

                        <div class="row">



                            <div class="form-group" ng-disabled="vm.Produto.ALTERANDO">
                                <label>Centro de Custo Atual <a href ng-click="vm.View.TAB_SELECTED = vm.View.TABS[3]; vm.Produto.ALTERANDO = true">(Alterar)</a></label>
                                <input type="text" class="form-control input-maior" readonly value="@{{ vm.Produto.SELECTED.CCUSTO_DADOS[0].CCUSTO_MASK }} - @{{ vm.ProdutoCCusto.DADOS_RENDER[0].CCUSTO_DESCRICAO }}">
                            </div>

                            <div class="form-group">
                                <label>Situação da Garantia <a href ng-click="vm.View.TAB_SELECTED = vm.View.TABS[4]; vm.Produto.ALTERANDO = true">(Alterar)</a></label>
                                <input type="text" class="form-control " style="min-width: 230px ; text-transform: initial" readonly value="@{{ vm.ProdutoGarantia.DADOS_RENDER[0].DATA_2_TEXT }} ( @{{ vm.ProdutoGarantia.DADOS_RENDER[0].STATUS || 'Sem garantia' }} )">
                            </div>

                            <style>
                                .tab-content .form-group .input-criticidade {
                                    width: 61px !important;
                                    font-weight: bold;
                                    font-size: 14px;
                                    text-align: center;                                         
                                }
                                
                                .input-criticidade.danger {
                                    background-color: rgb(242, 222, 222);
                                    border-color: rgb(235, 204, 209);
                                    color: rgb(169, 68, 66);
                                }
                                
                                .input-criticidade.warning {
                                    background-color: rgb(252, 248, 227);
                                    border-color: rgb(250, 235, 204);
                                    color: rgb(138, 109, 59);
                                }
                                
                                .input-criticidade.success {
                                    background-color: rgb(223, 240, 216);
                                    border-color: rgb(214, 233, 198);
                                    color: rgb(60, 118, 61);
                                }
                            </style>
                            <div class="form-group">
                                <label>Criticidade: <a href ng-click="vm.View.TAB_SELECTED = vm.View.TABS[2]; vm.Produto.ALTERANDO = true">(Alterar)</a></label>
                                <input 
                                    type="text" 
                                    class="form-control input-menor input-criticidade" 
                                    style="text-transform: initial" 
                                    readonly 
                                    value="@{{ vm.Produto.SELECTED.CRITICIDADE_CLASSIFICACAO }}"
                                    ng-class="{
                                        'danger' : vm.Produto.SELECTED.CRITICIDADE_CLASSIFICACAO == 'A',
                                        'warning' : vm.Produto.SELECTED.CRITICIDADE_CLASSIFICACAO == 'B',
                                        'success' : vm.Produto.SELECTED.CRITICIDADE_CLASSIFICACAO == 'C',
                                    }"
                                    >
                            </div>

                        </div>

                        <div class="row">

                            <div class="consulta-inline consulta-nfe"></div>

                            <div class="consulta-inline consulta-imobilizado"></div>

                        </div>

                        <div class="row">

                            <div class="consulta-inline consulta-fabricante"></div>

                            <div class="form-group">
                                <label>Modelo:</label>
                                <input 
                                    uppercase
                                    type="text" 
                                    class="form-control" 
                                    ng-readonly="!vm.Produto.ALTERANDO"
                                    ng-model="vm.Produto.SELECTED.MODELO"
                                    >
                            </div>

                            <div class="form-group">
                                <label>Nº Série:</label>
                                <input 
                                    uppercase
                                    type="text" 
                                    class="form-control" 
                                    ng-readonly="!vm.Produto.ALTERANDO"
                                    ng-model="vm.Produto.SELECTED.NUMERO_SERIE"
                                    >
                            </div>

                            <div class="form-group">
                                <label>Ano de Fabricação:</label>
                                <input 
                                    type="text" 
                                    class="form-control input-menor" 
                                    ng-readonly="!vm.Produto.ALTERANDO"
                                    ng-model="vm.Produto.SELECTED.ANO_FABRICACAO"
                                    >
                            </div>

                        </div>

                        <div class="row">
                            <div class="form-group">
                                <label>Observações:</label>
                                <textarea 
                                    class="form-control" 
                                    style="width: 60vw;"
                                    ng-readonly="!vm.Produto.ALTERANDO"
                                    ng-model="vm.Produto.SELECTED.OBSERVACAO"
                                    ></textarea>
                            </div>
                        </div>

                    <style>
#tab-geral .background:before {
    content: 'Imagem Padrão (Clique para alterar)';
    position: absolute;
    white-space: pre;
    right: 0;
    bottom: -15px;
    color: rgb(51, 51, 51);
    text-shadow: 0px 0px 1px white;
    font-size: 85%;
    font-weight: bold;
}                        
                    </style>
                    
            <div
                ng-click="vm.View.TAB_SELECTED = vm.View.TABS[5]; vm.Produto.ALTERANDO = true"
                class="background"
                style="
                    width: 200px;
                    height: 200px;
                    display: inline-block;
                    margin: 4px;
                    box-shadow: 4px 4px 11px 0px #8e8e8e;
                    border-radius: 5px;
                    cursor: pointer;
                    position: relative;
                    background-color: rgb(255, 255, 255);
                ">
                    <div
                        style="                  
                            background-image: url(@{{ vm.Produto.SELECTED.IMAGEM.CONTEUDO_THUMB }});
                            width: 100%;
                            height: 100%;
                            background-size: cover;
                            border-radius: 5px;      
                            transition: 0.5s;
                            background-position: top;  
                            text-align: center;
                            line-height: 20em;                            
                        ">@{{ vm.Produto.SELECTED.IMAGEM.CONTEUDO_THUMB.length > 0 ? '' : 'Imagem padrão não definida' }}</div>      
                </div>                    
 
                        
                </div>

                <div class="tab-pane active" ng-show="vm.View.TAB_SELECTED.ID == 'estrutura'">
                    @include($menu.'.modal-produto.index_estrutura')
                </div>

                <div class="tab-pane active" ng-show="vm.View.TAB_SELECTED.ID == 'criticidade'">
                    @include($menu.'.modal-produto.index_criticidade')
                </div>

                <div class="tab-pane active" ng-show="vm.View.TAB_SELECTED.ID == 'ccusto'">
                    @include($menu.'.modal-produto.index_ccusto')
                </div>

                <div class="tab-pane active" ng-show="vm.View.TAB_SELECTED.ID == 'garantia'">
                    @include($menu.'.modal-produto.index_garantia')
                </div>

                <div class="tab-pane active anexo" ng-show="vm.View.TAB_SELECTED.ID == 'anexo'">
                    @include($menu.'.modal-produto.index_anexo')
                </div>
                <div class="tab-pane active" ng-show="vm.View.TAB_SELECTED.ID == 'escala'">
                    Escala de Funcionamento
                </div>
            </div>
        </div> 


              
        
    </form>
    
</div>

@overwrite