<!DOCTYPE html>
<!--
    TEMPLATE: form-base.html
    =============================================
    Formulario Fluig padrao com paineis BPM.
    Sem tabela pai-filho. Para formularios com
    tabela, use form-pai-filho.html.

    INSTRUCOES:
    - Substitua ${...} pelos valores reais
    - Ajuste os paineis conforme atividades do processo
    - Cada atividade BPM = 1 painel colapsavel
    - Campos readonly sao preenchidos automaticamente
-->
<html>
<head>
    <meta charset="utf-8" />
    <title>${TITULO_FORMULARIO}</title>

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

    <!-- JS obrigatorios (nao alterar ordem) -->
    <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>

    <!-- 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                          -->
            <!-- Sempre incluir: nrSolicitacao, login, situacao     -->
            <!-- ================================================== -->
            <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 DO FORMULARIO                            -->
                <!-- ================================================== -->
                <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">
                                <!-- Logo opcional da empresa -->
                                <img class="img" src="" alt="" />
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12">
                            <span><small>${AREA} / <b>${TITULO_FORMULARIO}</b></small></span>
                        </div>
                    </div>
                    <br />
                </div>

                <!-- ================================================== -->
                <!-- PAINEL 1: ${TITULO_PAINEL_1}                       -->
                <!-- 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">

                            <!-- Linha 1: Solicitante (readonly) + Data (readonly) -->
                            <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>

                            <!-- Linha 2: Campos editaveis -->
                            <div class="row">
                                <!-- Campo texto -->
                                <div class="form-group col-xs-12 col-md-6">
                                    <label for="${CAMPO_TEXTO}">${LABEL_TEXTO} <span style="color:red">*</span></label>
                                    <input type="text" class="form-control"
                                        name="${CAMPO_TEXTO}" id="${CAMPO_TEXTO}" />
                                </div>

                                <!-- Select com opcoes fixas -->
                                <div class="form-group col-xs-12 col-md-3">
                                    <label for="${CAMPO_SELECT}">${LABEL_SELECT} <span style="color:red">*</span></label>
                                    <select class="form-control" name="${CAMPO_SELECT}" id="${CAMPO_SELECT}">
                                        <option value="">Selecione</option>
                                        <option value="opcao_1">Opcao 1</option>
                                        <option value="opcao_2">Opcao 2</option>
                                    </select>
                                </div>

                                <!-- Select com dataset -->
                                <div class="form-group col-xs-12 col-md-3">
                                    <label for="${CAMPO_DS}">${LABEL_DS}</label>
                                    <select class="form-control" name="${CAMPO_DS}" id="${CAMPO_DS}"
                                        dataset="${DATASET_ID}" datasetkey="${COL_VALOR}"
                                        datasetvalue="${COL_DISPLAY}" addBlankLine="true">
                                    </select>
                                </div>
                            </div>

                            <!-- Linha 3: Zoom + Data com calendario -->
                            <div class="row">
                                <!-- Campo zoom (busca) -->
                                <div class="form-group col-xs-12 col-md-5">
                                    <label for="${CAMPO_ZOOM}">${LABEL_ZOOM}</label>
                                    <input type="zoom" class="form-control"
                                        name="${CAMPO_ZOOM}" id="${CAMPO_ZOOM}"
                                        data-zoom="{
                                            'displayKey':'${DISPLAY_KEY}',
                                            'datasetId':'${DATASET_ZOOM}',
                                            'filterValues': '${FILTRO_KEY},${FILTRO_VALUE}',
                                            'maximumSelectionLength':'1',
                                            'placeholder':'${PLACEHOLDER}',
                                            'fields':[
                                                {'field':'${FIELD_COD}','label':'Codigo'},
                                                {'field':'${FIELD_DESC}','label':'Descricao','standard':'true','search':'true'}
                                            ]
                                        }" />
                                    <input type="hidden" name="cod_${CAMPO_ZOOM}" id="cod_${CAMPO_ZOOM}" />
                                </div>

                                <!-- Campo data com calendario -->
                                <div class="form-group col-xs-12 col-md-3">
                                    <label for="${CAMPO_DATA}">${LABEL_DATA} <span style="color:red">*</span></label>
                                    <div class="input-group date">
                                        <input type="text" class="form-control"
                                            name="${CAMPO_DATA}" id="${CAMPO_DATA}" />
                                        <span class="input-group-addon">
                                            <span class="fluigicon fluigicon-calendar"></span>
                                        </span>
                                    </div>
                                </div>

                                <!-- Campo monetario -->
                                <div class="form-group col-xs-12 col-md-4">
                                    <label for="${CAMPO_VALOR}">${LABEL_VALOR}</label>
                                    <input type="text" class="form-control"
                                        name="${CAMPO_VALOR}" id="${CAMPO_VALOR}"
                                        onkeypress="return Numero(event);" />
                                </div>
                            </div>

                            <!-- Linha 4: Textarea -->
                            <div class="row">
                                <div class="form-group col-xs-12 col-md-12">
                                    <label for="${CAMPO_OBS}">${LABEL_OBS}</label>
                                    <textarea class="form-control" name="${CAMPO_OBS}"
                                        id="${CAMPO_OBS}" rows="4"></textarea>
                                </div>
                            </div>

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

                <!-- ================================================== -->
                <!-- PAINEL 2: ${TITULO_PAINEL_2} (Aprovacao)           -->
                <!-- Atividade ${ATIV_2} do processo BPM                -->
                <!-- ================================================== -->
                <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_2}</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">
                            <!-- Hidden: dados do aprovador (preenchidos por displayFields) -->
                            <input type="hidden" name="nomeAprovador_${ATIV_2}" id="nomeAprovador_${ATIV_2}" />
                            <input type="hidden" name="loginAprovador_${ATIV_2}" id="loginAprovador_${ATIV_2}" />
                            <input type="hidden" name="dtAprovacao_${ATIV_2}" id="dtAprovacao_${ATIV_2}" />

                            <!-- Radio Sim/Nao -->
                            <div class="row">
                                <div class="form-group col-xs-12 col-md-12">
                                    <label>${PERGUNTA_APROVACAO} <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>

                            <!-- Observacao do aprovador -->
                            <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>
