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

@section('modal-header-left')

<h4 class="modal-title">
	<span>@{{vm.MODAL.MODELO_ID}} - @{{vm.MODAL.MODELO_DESCRICAO}} | Ficha de Processos</span>
</h4>

@overwrite

@section('modal-header-right')
	<button type="button" class="btn btn-default btn-fechar-modal btn-voltar" ng-click="vm.CADDEMODELFICHATECNICA_CONS_TEMPLATE.fecharModalProcesso()" data-hotkey="esc">
		<span class="glyphicon glyphicon-chevron-left"></span> Voltar
    </button>	
@overwrite

@section('modal-body')
<div style="margin: 15px;">
    <fieldset style="margin-top: 10px;">
        <legend>Arquivos</legend>
        <div>
            <div class="row">
                <div
                    id="render_foto_template" 
                    style="background-color: rgb(255, 255, 255); 
                        background-size: contain; 
                        border: 1px solid rgb(51, 122, 183); 
                        background-repeat: no-repeat; 
                        background-position: center center; 
                        height: 116px; 
                        border-radius: 12px 12px 0px 0px; 
                        width: 136px; 
                        z-index: 99999;
                        transform: scale(2);
                        margin-left: 100px;
                        margin-top: -160px;
                        position: fixed;
                        display: none;">
                </div>

                <div>

                    <fieldset style="margin-top: 10px; margin-bottom: 10px;">													

                        <div style="margin-bottom: 10px; overflow-x: auto; background-color: #f3f0f0;">

                            <div style="display: inline-flex; margin: 2px; flex-wrap: nowrap; justify-content: center; align-content: center; align-items: center;" >
                                
                                <div ng-repeat="chave in vm.CADDEMODELFICHATECNICA_CONS_TEMPLATE.ARQUIVOS_MODELO.IMAGENS track by $index" class="arquivo-container"
                                    style="@{{chave.EXTENSAO == 'PDF' ? 'max-width: fit-content; width: 142px;' : ''}}">
                                    <div 
                                        id="foto_@{{$index}}"
                                        ng-if="chave.EXTENSAO != 'PDF'"
                                        ng-mouseover="vm.ZoominItemTemplate(chave, $index, $event, 2);"
                                        ng-mouseleave="vm.ZoomoutItemTemplate(chave, $index, $event);"
                                        ng-click="vm.CADDEMODELFICHATECNICA_CONS_TEMPLATE.visualizarFotoFicha(chave)"
                                        title="Clique duas vezes para abrir a foto."
                                        style="background-color: rgb(255, 255, 255); margin-right: 5px; 
                                            background-size: contain;
                                            border: 1px solid rgb(51, 122, 183);
                                            background-repeat: no-repeat;
                                            background-position: center center;
                                            height: 116px;
                                            border-radius: 12px 12px 0px 0px;
                                            width: 136px;
                                            cursor: pointer;
                                            background-image: url('@{{chave.DADOS}}');">
                                    </div>
                                    
                                    <div 
                                        id="foto_@{{$index}}"																	
                                        ng-if="chave.EXTENSAO == 'PDF'"	
                                        class="form-group"																															
                                        ng-click="vm.CADDEMODELFICHATECNICA_CONS_TEMPLATE.showArquivos(chave.CAMINHO_REL, chave)"
                                        title="Clique para visualizar PDF">
                                        <span class="Apdf"
                                            style="background-color: rgb(255, 255, 255); margin-right: 5px; 
                                                background-size: contain;
                                                border: 1px solid rgb(51, 122, 183);
                                                background-repeat: no-repeat;
                                                background-position: center center;
                                                height: 116px;
                                                border-radius: 12px 12px 0px 0px;
                                                width: 136px;
                                                cursor: pointer;">
                                        </span>
                                    </div>

                                    <label ng-if="chave.EXTENSAO == 'PDF'" 
                                        style="width: calc(100% - 6px);
                                               height: 30px;
                                               background-color: #337ab7;
                                               margin-left: 0px;
                                               margin-top: -15px;
                                               color: white;
                                               border-radius: 0px 0px 7px 7px;
                                               font-size: 10px;
                                               display: inline-flex;
                                               max-width: 138px;
                                               padding-left: 5px">
                                        <label style="width: 100px;">@{{chave.NOME_ARQUIVO}}</label>
                                    </label>

                                </div>
                            <div>

                        </div>
                    </fieldset>

                </div>
            </div>
        </div>
    </fieldset>

    <fieldset style="margin-top: 10px;" ng-if="vm.CADDEMODELFICHATECNICA_CONS_TEMPLATE.DADOS.length > 0">
        <legend>Parâmetros</legend>
        <div class="row" ng-repeat="campo in vm.CADDEMODELFICHATECNICA_CONS_TEMPLATE.DADOS">
            
            <div class="form-group" ng-if="campo.TIPO == '1' && (campo.TAMANHO_CAMPO == 0 || campo.TAMANHO_CAMPO < 0)">
                <label>@{{ campo.TIPO_DESCRICAO }}:</label>
                <input
                    type="text"
                    class="form-control input-menor text-right"
                    only-digits2
                    style="width: 145px !important;"
                    ng-disabled="!vm.CADDEMODELFICHATECNICA_CONS_TEMPLATE.ALTERANDO"
                    ng-model="campo.VALOR">
            </div>
            
            <div class="form-group" ng-if="campo.TIPO == '1' && campo.TAMANHO_CAMPO > 0">
                <label>@{{ campo.TIPO_DESCRICAO }}:</label>
                <input
                    type="text"
                    class="form-control input-menor text-right"
                    ng-number-format="@{{campo.TAMANHO_CAMPO}}"
                    style="width: 145px !important;"
                    ng-disabled="!vm.CADDEMODELFICHATECNICA_CONS_TEMPLATE.ALTERANDO"
                    ng-model="campo.VALOR">
            </div>

            <div class="form-group" ng-if="campo.TIPO == '2'
                                        && (campo.TAMANHO_CAMPO == '1' || campo.TAMANHO_CAMPO == '0')">
                <label>@{{ campo.TIPO_DESCRICAO }}:</label>
                <input
                    type="text"
                    class="form-control input-medio"
                    style="width: 400px;"
                    ng-disabled="!vm.CADDEMODELFICHATECNICA_CONS_TEMPLATE.ALTERANDO"
                    ng-model="campo.VALOR">
            </div>

            <div class="row" style="height: 100%;" ng-if="campo.TIPO == '2' && campo.TAMANHO_CAMPO == '2'">
                <div class="form-group" style="width: calc(100% - 0px); height: calc(100% - 0px);">
                    <label>@{{ campo.TIPO_DESCRICAO }}:</label>
                    <textarea style="resize: none; height: 94%; width: 48%;"
                        class="form-control normal-case" maxlength="10000"
                        ng-disabled="!vm.CADDEMODELFICHATECNICA_CONS_TEMPLATE.ALTERANDO"
                        ng-model="campo.VALOR">
                    </textarea>
                </div>
            </div>

            <div class="form-group" ng-if="campo.TIPO == '2' && campo.TAMANHO_CAMPO == '3'">
                <label>@{{ campo.TIPO_DESCRICAO }}:</label>
                <textarea maxlength="10000" style="resize: none;" class="form-control normal-case"
                    cols="100" rows="10" ng-disabled="!vm.CADDEMODELFICHATECNICA_CONS_TEMPLATE.ALTERANDO"
                    ng-model="campo.VALOR">
                </textarea>
            </div>

            <div class="form-group" ng-if="campo.TIPO == '3'">
                <label>@{{ campo.TIPO_DESCRICAO }}:</label>
                <input
                    type="date"
                    class="form-control input-medio"
                    ng-disabled="!vm.CADDEMODELFICHATECNICA_CONS_TEMPLATE.ALTERANDO"
                    ng-model="campo.VALOR">
            </div>

            <div class="form-group" ng-if="campo.TIPO == '4'">
                <label>@{{ campo.TIPO_DESCRICAO }}:</label>
                <select
                    style="width: fit-content;"
                    class="form-control"
                    ng-disabled="!vm.CADDEMODELFICHATECNICA_CONS_TEMPLATE.ALTERANDO"
                    ng-model="campo.VALOR">
                    <option ng-repeat="item in campo.ITENS track by $index" value="@{{item.VALOR}}">@{{item.DESCRICAO}}</option>
                </select>
            </div>

            <div class="form-group" ng-if="campo.TIPO == '5'" style="margin-top: 15px;">
                <label>@{{ campo.TIPO_DESCRICAO }}</label>
                <div class="table-ec" style="border-radius: 8px 6px 6px 8px; width: fit-content;">
                    <table class="table table-striped table-bordered table-condensed table-no-break table-middle table-low">
                        <thead>
                            <tr ng-if="$index == 0" ng-repeat="tabela in campo.TABELA track by $index">
                                <th></th>
                                <th ng-repeat="columns in tabela.COLUNAS">@{{ columns.COLUNA.DESCRICAO }}</th>
                            </tr>
                        </thead>

                        <tbody>
                            <tr ng-repeat="linha in campo.TABELA">
                                <td class="matriz-linhas">@{{ linha.LINHA.DESCRICAO }}</td>
                                <td ng-repeat="coluna in linha.COLUNAS">
                                    <input type="text" ng-model="coluna.VALOR" class="atalho-input-tabela-2"   ng-show="coluna.COLUNA.TIPO == '1'"
                                        ng-disabled="!vm.CADDEMODELFICHATECNICA_CONS_TEMPLATE.ALTERANDO" style="width: 100%;">
                                    <input type="number" ng-model="coluna.VALOR" class="atalho-input-tabela-2" ng-show="coluna.COLUNA.TIPO == '2'"
                                        ng-disabled="!vm.CADDEMODELFICHATECNICA_CONS_TEMPLATE.ALTERANDO" style="width: 100%; text-align: right;">
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
        </div>

    </fieldset>
</div>

@overwrite