<?php
include 'header.php';
//include 'toolbar.php';
?>

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li role="presentation" class="active"><a href="#form1" aria-controls="form1" role="tab" data-toggle="tab">Form #1</a></li>
  <li role="presentation" class=""><a href="#modo-de-uso" aria-controls="modo-de-uso" role="tab" data-toggle="tab">Modo de uso</a></li>
</ul>


<!-- Tab panes -->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="form1">
    <div class="block">
      <div class="header">
        <h2>Helper Modal</h2>
      </div>
      <div class="content controls">
        <form id="helper-modal" action="#" method="post">
          <div>
            <div class="form-row">
              <div class="col-md-12">
                <p>Aperte o play do youtube. O link é o que aparece no compartilhar do youtube, ou o da barra de endereços mesmo. Suporta também quando tem lista de vídeos no link.</p>
                <p>
                  <a href="https://youtu.be/gRYS9Zggp9I?list=PLf7vZ02bgXGW0fOSUwWxRxwW6xI2cFuOG" data-rel="youtube-modal" target="_blank" class="btn btn-clean"><i class="fa fa-play"></i></a>
                </p>
              </div>
            </div>
            <div class="form-row">
              <div class="col-md-12">
                Abaixo, o form helper
              </div>
            </div>
            <div class="form-row">
              <div class="col-md-3 tar">
                <label for="id_pai">ID Pai:</label>
              </div>
              <div class="col-md-2">
                <div class="input-group">
                  <input type="text" name="id_pai" id="id_pai" class="" value="" />
                  <div class="input-group-addon">
                    <a href="helper-id-pai.php" class='input-helper' data-remote="false" data-toggle="modal" data-target="#helper-modal-div" data-value="#id_pai" data-description="#id_pai_desc" data-title="Selecione o pai"><span class="fa fa-search"></span></a>
                  </div>
                </div>
                <span class="help-inline">ID do pai</span>
              </div>
              <div class="col-md-7">
                <span class="form-control-static" id="id_pai_desc">-</span>
              </div>
            </div>

            <div class="form-row">
              <div class="col-md-3 tar">
                <label for="outro_id_pai">Outro ID Pai:</label>
              </div>
              <div class="col-md-2">
                <div class="input-group">
                  <input type="text" name="outro_id_pai" id="outro_id_pai" class="" value="" />
                  <div class="input-group-addon">
                    <a href="helper-id-pai.php" class='input-helper' data-remote="false" data-toggle="modal" data-target="#helper-modal-div" data-value="input[name=outro_id_pai]" data-description="#outro_id_pai_desc" data-title="Selecione o outro pai"><span class="fa fa-search"></span></a>
                  </div>
                </div>
                <span class="help-inline">Outro ID do pai</span>
              </div>
              <div class="col-md-7">
                <span class="form-control-static" id="outro_id_pai_desc">-</span>
              </div>
            </div>

          </div>
        </form>
      </div>
    </div>
  </div>
  
  <div role="tabpanel" class="tab-pane fade in" id="modo-de-uso">
    <div class="block">
      <div class="content">
        <h1>Como adicionar o seu form helper</h1>
        <ol>
          <li>Adicionar o campo text dentro de um div com classe input-group, <a href="http://getbootstrap.com/css/#forms-inline" target="_blank">como nos exemplos do bootstrap 3</a>:
          </li>
          <li>Após o campo text, adicionar o link para a lupa com seus atributos data:
            <ul>
              <li><code>data-remote, data-toggle e data-target</code> podem manter igual, coisas do bootstrap</li>
              <li><code>href="xxx.php"</code> é o endereço que irá abrir no modal</li>
              <li><code>data-value</code> é o seletor para o campo do valor, por exemplo <code>#id</code>, <code>input[name=nomeDoCampo]</code></li>
              <li><code>data-description</code> é o seletor para o campo da descrição, por exemplo <code>#desc</code>, <code>input[name=nomeDoCampo]</code></li>
              <li><code>data-title</code> é o título do modal</li>
            </ul>
          </li>
          <li>Depois, já fora do div input-group, adicionar o campo que será a descrição para o id selecionado</li>
          <li>Segue exemplo completo no form chamador:
            <pre>&lt;div class=&quot;input-group&quot;&gt;
  &lt;input type=&quot;text&quot; name=&quot;id_pai&quot; id=&quot;id_pai&quot; class=&quot;&quot; value=&quot;&quot; /&gt;
  &lt;div class=&quot;input-group-addon&quot;&gt;
    &lt;a href=&quot;helper-id-pai.php&quot; data-remote=&quot;false&quot; data-toggle=&quot;modal&quot; data-target=&quot;#helper-modal-div&quot; data-value=&quot;#id_pai&quot; data-description=&quot;#id_pai_desc&quot; data-title=&quot;Selecione o pai&quot;&gt;&lt;span class=&quot;fa fa-search&quot;&gt;&lt;/span&gt;&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;span class=&quot;form-control-static&quot; id=&quot;id_pai_desc&quot;&gt;descri&ccedil;&atilde;o&lt;/span&gt;
</pre>
          </li>
          <li>No link chamado pelo href da lupa, a tabela precisa ter id="helperTable" para poder ser chamado o método DataTable nela, para adicionar os filtros</li>
          <li>A tabela precisa de ao menos 2 colunas, id e alguma descrição, outras colunas são opcionais</li>
          <li>Exemplo:
            <pre>&lt;div class=&quot;table-responsive&quot;&gt;
  &lt;table class=&quot;table table-bordered table-striped table-responsible sortable table-clickable-row&quot; id=&quot;helperTable&quot;&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th width=&quot;5%&quot;&gt;ID&lt;/th&gt;
        &lt;th width=&quot;95%&quot;&gt;Nome&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;?php
      for($i = 0; $i &lt; 50; $i++) {
        ?&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;?php echo $i; ?&gt;&lt;/td&gt;
        &lt;td&gt;Nome &lt;?php echo $i; ?&gt;&lt;/td&gt;
      &lt;/tr&gt;
        &lt;?php
      }
      ?&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
&lt;/div&gt; &lt;!-- table-responsive --&gt;
</pre>
        </ol>
      </div>
    </div>
  </div>

</div>

<!-- modals para youtube e helper -->

<!-- modal do youtube -->
<div class="modal modal-white modal-draggable fade" id="youtube-modal-div" tabindex="-1" role="dialog" aria-labelledby="youtube-modal-label" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-body">
        <iframe width="100%" height="360" src="" frameborder="0" allowfullscreen></iframe>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
      </div>
    </div>
  </div>
</div>

<!-- modal do helper -->
<div class="modal modal-white modal-draggable fade" id="helper-modal-div" tabindex="-1" role="dialog" aria-labelledby="helper-modal-label" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="helper-modal-label">Helper</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal" id="modalCancel">Cancelar</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal" id="modalOk" disabled="disabled">Selecionar</button>
      </div>
    </div>
  </div>
</div>

  <?php
include 'footer.php';
?>
