<!DOCTYPE html>
<!--
    TEMPLATE: form-pai-filho.html
    =============================================
    Formulario Fluig com tabela pai-filho.
    Baseado em padroes reais de producao (VIPal, BOMAG, DIAGNOSE, PROLUX).

    INSTRUCOES:
    - Substitua ${...} pelos valores reais
    - A tabela pai-filho usa noaddbutton="true" e nodeletebutton="true"
      para controle manual via botoes customizados
    - Campos da tabela usam convencao nome_campo (sem ___N, o Fluig adiciona automaticamente)
    - Use fnCustomDelete() para remover linhas
    - Use wdkAddChild('nomeTabela') para adicionar linhas
-->
<html>
<head>
    <meta charset="utf-8" />
    <title>${TITULO_FORMULARIO}</title>

    <!-- Style Guide Fluig -->
    <link rel="stylesheet" type="text/css"
          href="/style-guide/css/fluig-style-guide-flat.min.css" />

    <!-- JS obrigatorios -->
    <script src="/portal/resources/js/jquery/jquery.js"></script>
    <script src="/portal/resources/js/jquery/jquery-ui.min.js"></script>
    <script src="/portal/resources/js/mustache/mustache-min.js"></script>
    <script src="/style-guide/js/fluig-style-guide.min.js" charset="utf-8"></script>

    <!-- jQuery Mask (para mascaras monetarias) -->
    <script src="jquery.mask.min.js"></script>

    <!-- JS e CSS customizados -->
    <script src="custom.js"></script>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="fluig-style-guide">
        <form name="form" role="form">

            <!-- Campos hidden de controle -->
            <input type="hidden" name="nrSolicitacao" id="nrSolicitacao" />
            <input type="hidden" name="loginSolicitante" id="loginSolicitante" />
            <input type="hidden" name="situacao" id="situacao" />

            <div class="panel-group" id="geral">

                <!-- ================================================== -->
                <!-- CABECALHO                                          -->
                <!-- ================================================== -->
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-xs-10 col-md-10">
                            <h2><strong>${TITULO_FORMULARIO}</strong></h2>
                        </div>
                        <div class="col-xs-2 col-md-2">
                            <div class="pull-right">
                                <img class="img" src="" alt="" />
                            </div>
                        </div>
                    </div>
                    <br />
                </div>

                <!-- ================================================== -->
                <!-- PAINEL: DADOS PRINCIPAIS + TABELA PAI-FILHO        -->
                <!-- Atividade ${ATIV_1} do processo BPM                -->
                <!-- ================================================== -->
                <div class="panel panel-default" id="painel_ativ_${ATIV_1}">
                    <div class="panel-heading">
                        <div class="row">
                            <div class="col-xs-12 col-md-12">
                                <a class="collapse-icon" data-toggle="collapse"
                                   data-parent="#painel_ativ_${ATIV_1}"
                                   href="#painelA_ativ_${ATIV_1}">
                                    <h4 class="panel-title">
                                        <strong>1 - ${TITULO_PAINEL_1}</strong>
                                    </h4>
                                </a>
                                <em><span class="label label-success" id="span_${ATIV_1}"></span></em>
                                <input type="hidden" name="vUserSpan_${ATIV_1}" id="vUserSpan_${ATIV_1}" value="" />
                                <input type="hidden" name="vDateSpan_${ATIV_1}" id="vDateSpan_${ATIV_1}" value="" />
                            </div>
                        </div>
                    </div>
                    <div id="painelA_ativ_${ATIV_1}" class="panel-collapse collapse">
                        <div class="panel-body">

                            <!-- Campos do pai (dados principais) -->
                            <div class="row">
                                <div class="form-group col-xs-12 col-md-4">
                                    <label for="solicitante">Solicitante</label>
                                    <input type="text" class="form-control"
                                        name="solicitante" id="solicitante" readonly />
                                </div>
                                <div class="form-group col-xs-12 col-md-3">
                                    <label for="data_solicitacao">Data</label>
                                    <input type="text" class="form-control"
                                        name="data_solicitacao" id="data_solicitacao" readonly />
                                </div>
                                <div class="form-group col-xs-12 col-md-5">
                                    <label for="${CAMPO_PAI_1}">${LABEL_PAI_1} <span style="color:red">*</span></label>
                                    <input type="text" class="form-control"
                                        name="${CAMPO_PAI_1}" id="${CAMPO_PAI_1}" />
                                </div>
                            </div>

                            <!-- ====================================== -->
                            <!-- TABELA PAI-FILHO: ${NOME_TABELA}       -->
                            <!-- ====================================== -->
                            <div class="row">
                                <div class="col-xs-12 col-md-12 table-responsive">
                                    <h4 class="page-header">${TITULO_TABELA}</h4>

                                    <table tablename="${NOME_TABELA}" id="${NOME_TABELA}"
                                        class="table table-hover table-condensed"
                                        noaddbutton="true" nodeletebutton="true">
                                        <thead>
                                            <tr>
                                                <th style="width:5%"></th>
                                                <th style="width:30%">${COL_1} <span style="color:red">*</span></th>
                                                <th style="width:15%">${COL_2}</th>
                                                <th style="width:10%">${COL_3} <span style="color:red">*</span></th>
                                                <th style="width:15%">${COL_4}</th>
                                                <th style="width:25%">${COL_5}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <!-- Coluna: Botao excluir -->
                                                <td>
                                                    <button class="btn btn-danger btn-sm"
                                                        name="btDelete${NOME_TABELA}"
                                                        onclick="fnCustomDelete(this, this.name)">
                                                        <i class="fluigicon fluigicon-trash icon-sm"></i>
                                                    </button>
                                                </td>

                                                <!-- Coluna 1: Campo texto -->
                                                <td>
                                                    <input type="text" class="form-control"
                                                        name="${CAMPO_FILHO_1}" id="${CAMPO_FILHO_1}" />
                                                </td>

                                                <!-- Coluna 2: Select fixo -->
                                                <td>
                                                    <select class="form-control"
                                                        name="${CAMPO_FILHO_2}" id="${CAMPO_FILHO_2}">
                                                        <option value="">Sel.</option>
                                                        <option value="${OPT_1}">${OPT_1}</option>
                                                        <option value="${OPT_2}">${OPT_2}</option>
                                                    </select>
                                                </td>

                                                <!-- Coluna 3: Campo numerico -->
                                                <td>
                                                    <input type="text" class="form-control"
                                                        name="${CAMPO_FILHO_3}" id="${CAMPO_FILHO_3}"
                                                        onkeypress="return Numero(event);" />
                                                </td>

                                                <!-- Coluna 4: Campo monetario com mascara -->
                                                <td>
                                                    <input type="text" class="form-control"
                                                        name="${CAMPO_FILHO_4}" id="${CAMPO_FILHO_4}"
                                                        mask="#.##0,00" />
                                                </td>

                                                <!-- Coluna 5: Campo texto livre -->
                                                <td>
                                                    <input type="text" class="form-control"
                                                        name="${CAMPO_FILHO_5}" id="${CAMPO_FILHO_5}" />
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>

                                    <!-- Botao adicionar linha -->
                                    <button class="btn btn-primary" type="button"
                                        onclick="wdkAddChild('${NOME_TABELA}')">
                                        <i class="fluigicon fluigicon-plus icon-sm"></i> Novo Item
                                    </button>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <br />

                <!-- ================================================== -->
                <!-- PAINEL: APROVACAO (copie e ajuste para cada nivel)  -->
                <!-- ================================================== -->
                <div class="panel panel-default" id="painel_ativ_${ATIV_2}">
                    <div class="panel-heading">
                        <div class="row">
                            <div class="col-xs-12 col-md-12">
                                <a class="collapse-icon" data-toggle="collapse"
                                   data-parent="#painel_ativ_${ATIV_2}"
                                   href="#painelA_ativ_${ATIV_2}">
                                    <h4 class="panel-title">
                                        <strong>2 - ${TITULO_PAINEL_APROVACAO}</strong>
                                    </h4>
                                </a>
                                <em><span class="label label-success" id="span_${ATIV_2}"></span></em>
                                <input type="hidden" name="vUserSpan_${ATIV_2}" id="vUserSpan_${ATIV_2}" value="" />
                                <input type="hidden" name="vDateSpan_${ATIV_2}" id="vDateSpan_${ATIV_2}" value="" />
                            </div>
                        </div>
                    </div>
                    <div id="painelA_ativ_${ATIV_2}" class="panel-collapse collapse">
                        <div class="panel-body">
                            <input type="hidden" name="loginAprovador_${ATIV_2}" id="loginAprovador_${ATIV_2}" />
                            <input type="hidden" name="nomeAprovador_${ATIV_2}" id="nomeAprovador_${ATIV_2}" />

                            <div class="row">
                                <div class="form-group col-xs-12 col-md-12">
                                    <label>Aprovar? <span style="color:red">*</span></label><br />
                                    <div class="custom-radio custom-radio-inline custom-radio-success">
                                        <input type="radio" name="aprovacao_${ATIV_2}"
                                            id="aprovacao_${ATIV_2}Sim" value="S" />
                                        <label for="aprovacao_${ATIV_2}Sim">Aprovar</label>
                                    </div>
                                    <div class="custom-radio custom-radio-inline custom-radio-danger">
                                        <input type="radio" name="aprovacao_${ATIV_2}"
                                            id="aprovacao_${ATIV_2}Nao" value="N" />
                                        <label for="aprovacao_${ATIV_2}Nao">Reprovar</label>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group col-xs-12 col-md-12">
                                    <label for="obs_${ATIV_2}">Observacao</label>
                                    <textarea class="form-control" name="obs_${ATIV_2}"
                                        id="obs_${ATIV_2}" rows="3"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div><!-- fim panel-group -->
        </form>
    </div><!-- fim fluig-style-guide -->
</body>
</html>
