<!DOCTYPE html>
<html lang="pt-br">

<head>

  <!-- Metas Tags -->
  <?php include "includes/verifica.php"; ?>

  <!-- Metas Tags -->
  <?php include "../_assets/inc/metas.php"; ?>

  <!-- Title -->
  <?php include "../_assets/inc/title_adm.php"; ?>

  <!-- Head -->
  <?php include "../_assets/inc/head.php"; ?>

  <!-- Style DataTables -->
  <?php include "../_assets/inc/datatablesStyles.php"; ?>

  <!-- JS -->
  <?php include "../_assets/inc/js.php"; ?>

  <!--Input Bootstrap-->
  <?php include "../_assets/inc/js_input.php"; ?>
  
  <script type="text/javascript" src="includes/js/manterInformativos.js"></script>

</head>

<body class="nav-md">
  <div id="maskLoad"></div>
  <div class="container body">
    <div class="main_container">

      <?php include "includes/menu.php"; ?>

      <div class="right_col" role="main">

        <p class="text-center"><img  id="loadPublicacao" src="../_assets/images/gif/loading.gif" style="max-width: 150px; display:scroll;position:fixed;right: 0px; bottom: 0px; z-index: 10; display: none;"></p>
        <div class="">
          <!--Modal para atualizaçao-->
          <div class="modal fade" id="myModalAtualizar" role="dialog">
            <div class="modal-dialog">
              <!-- Modal content-->
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                  <h3><span class="glyphicon glyphicon-pencil"></span> Atualizar Informativo</h3>
                </div>
                <div class="modal-body" style="padding:30px 40px;">

                  <form class="form-horizontal" id="formAtualizar" enctype="multipart/form-data" style="max-width: 600px;">
                    
                    <div class="form-group">
                      <label class="control-label col-md-3 col-sm-3 col-xs-12" for="nomeAt">Nome <span class="required">*</span>
                      </label>
                      <div class="col-md-9 col-sm-9 col-xs-12">
                        <input type="text" id="nomeAt" name="nomeAt" placeholder="Nome do Informativo" required="required" class="form-control col-md-7 col-xs-12">
                        <input type="hidden" id="idAt" name="idAt">
                        <input type="hidden" id="statusAt" name="statusAt">
                        <input type="hidden" id="reloadAt" name="reloadAt">
                        <input type="hidden" name="acao" value="manterInform">
                        <input type="hidden" name="tipoAcao" value="editar">
                      </div>
                    </div>

                    <div class="form-group">
                      <label class="control-label col-md-3 col-sm-3 col-xs-12" for="textoAt">Data <span class="required">*</span>
                      </label>
                      <div class="col-md-9 col-sm-9 col-xs-12">
                        <input type="date" class="form-control" id="dataAt" name="dataAt" required>
                      </div>
                    </div>

                    <div class="form-group">
                      <label class="control-label col-md-3 col-sm-3 col-xs-12" for="iconeAt">Ínone <span class="required">*</span>
                      </label>
                      <div class="col-md-9 col-sm-9 col-xs-12">
                        <div class="form-group">
                          <input id="iconeInfoAt" name="iconeInfoAt" type="file" class="file-loading">
                        </div> 
                      </div>
                    </div>

                    <div class="form-group">
                      <label class="control-label col-md-3 col-sm-3 col-xs-12" for="textoAt">Texto <span class="required">*</span>
                      </label>
                      <div class="col-md-9 col-sm-9 col-xs-12">
                        <textarea type="text" id="textoAt" name="textoAt" placeholder="Descreva o texto do informativo." required="required" class="form-control col-md-7 col-xs-12" rows="4" cols="50" style="resize: none;"></textarea>
                      </div>
                    </div>

                    <div class="form-group"> 
                      <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-default" id="btnAtualizar">Atualizar</button>
                        <img  id="submitGif" src="../_assets/images/gif/load.gif" style="max-width: 50px;">
                        <p id="retornoAt" class="text-center"></p>
                      </div>
                    </div>

                  </form>
                </div> <!--modal-body (Atualizar)-->
              </div><!--modal-content (Atualizar)-->
            </div><!--modal-dialog (Atualizar)-->
          </div> <!--modal fade (Atualizar)-->

          <div class="page-title">
            <div class="title_left">
              <h3>Informativos</h3>
            </div>
            <div class="title_right">
              <div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
                <div class="input-group">

                </div>
              </div>
            </div>
          </div>
          <div class="clearfix"></div>

          <div class="row">

            <!-- Form de cadastro-->
            <div class="col-md-12 col-sm-12 col-xs-12">
              <div class="x_panel">
                <div class="x_title">
                  <h2>Cadastrar Informativo<small>*Para uso do sistema</small></h2>
                  <ul class="nav navbar-right panel_toolbox">
                    <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                    </li>
                    <li class="dropdown">
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                      <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Configuração 1</a>
                        </li>
                        <li><a href="#">Configuração 2</a>
                        </li>
                      </ul>
                    </li>
                    <li><a class="close-link"><i class="fa fa-close"></i></a>
                    </li>
                  </ul>
                  <div class="clearfix"></div>
                </div>
                <div class="x_content">
                  <br />
                  <form id="formCadastrar" data-parsley-validate class="form-horizontal form-label-left" enctype="multipart/form-data">

                    <div class="form-group">
                      <label class="control-label col-md-3 col-sm-3 col-xs-12" for="nome">Nome <span class="required">*</span>
                      </label>
                      <div class="col-md-6 col-sm-6 col-xs-12">
                        <input type="text" id="nome" name="nome" placeholder="Título do Informativo" required="required" class="form-control col-md-7 col-xs-12">
                        <input type="hidden" name="acao" value="manterInform">
                        <input type="hidden" name="tipoAcao" value="adicionar">
                      </div>
                    </div>

                    <div class="form-group">
                      <label for="data" class="control-label col-md-3 col-sm-3 col-xs-12">Data 
                        <span class="required">*</label>
                      <div class="col-md-3 col-sm-6 col-xs-12">
                        <input id="data" name="data" class="form-control col-md-7 col-xs-12" type="date" placeholder="Informe a data" required >
                      </div>
                    </div>
                    
                    <div class="form-group">
                      <label class="control-label col-md-3 col-sm-3 col-xs-12" for="texto">Status <span class="required">*</span>
                      </label>
                      <div class="col-md-3 col-sm-6 col-xs-12">
                         <select id="status" name="status" class="form-control" required>
                          <option value="Informe o Status" selected disabled>---</option>
                          <option value="1">Privado</option>
                          <option value="0">Público</option>
                        </select>
                      </div>
                    </div>

                    <div class="form-group">
                      <label class="control-label col-md-3 col-sm-3 col-xs-12" for="icone">Ícone <span class="required">*</span>
                      </label>
                      <div class="col-md-3 col-sm-6 col-xs-12">
                        <div class="form-group">
                        <input id="iconeInfo" name="iconeInfo" type="file" class="file-loading" required>
                        </div> 
                      </div>
                    </div>


                    <div class="form-group">
                      <label class="control-label col-md-3 col-sm-3 col-xs-12" for="texto">Texto <span class="required">*</span>
                      </label>
                      <div class="col-md-6 col-sm-6 col-xs-12">
                        <textarea type="text" id="texto" name="texto" placeholder="Descreva o texto do informativo." required="required" class="form-control col-md-7 col-xs-12" rows="4" cols="50" style="resize: none;"></textarea>
                      </div>
                    </div>
                    
                    <div class="ln_solid"></div>
                    <div class="form-group">
                      <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
                        <a class="btn btn-primary" id="btmCancelar">Cancelar</a>
                        <button type="submit" id="btnCadastro" class="btn btn-success">Cadastrar</button>
                      </div>
                    </div>

                  </form>
                </div>
              </div>
            </div><!--Form de cadastro-->

            <div class="col-md-12 col-sm-12 col-xs-12">
              <div class="x_panel">
                <div class="x_title">
                  <h2>Manter Informativos <small>*Atualizar dados</small></h2>
                  <ul class="nav navbar-right panel_toolbox">
                    <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                    </li>
                    <li class="dropdown">
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                      <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Settings 1</a>
                        </li>
                        <li><a href="#">Settings 2</a>
                        </li>
                      </ul>
                    </li>
                    <li><a href="#"><i class="fa fa-close"></i></a>
                    </li>
                  </ul>
                  <div class="clearfix"></div>
                </div>
                <div class="x_content">
                  <p class="text-muted font-13 m-b-30">
                    Aqui você acompanha os dados de cada informativo e poderá verificar suas informações.
                  </p>

                  <div class="" role="tabpanel" data-example-id="togglable-tabs">
                    <ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist">
                      <li role="presentation" class="active"><a href="#tab_content1" id="home-tab" role="tab" data-toggle="tab" aria-expanded="true">Informativos Privados</a>
                      </li>
                      <li role="presentation" class=""><a href="#tab_content2" role="tab" id="profile-tab" data-toggle="tab" aria-expanded="false">Informativos Públicos</a>
                      </li>
                    </ul>

                    <div id="myTabContent" class="tab-content">
                      <!--Ativos-->
                      <div role="tabpanel" class="tab-pane fade active in" id="tab_content1" aria-labelledby="home-tab">
  
                        <table id="datatable-info-active" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
                          <thead>
                            <tr>
                              <th>Ícone</th>
                              <th>Nome</th>
                              <th>Data</th>
                              <th>Ações</th>
                            </tr>
                          </thead>
                        </table>
                      </div><!--tab_content1-->

                      <!--inativos-->
                      <div role="tabpanel" class="tab-pane fade" id="tab_content2" aria-labelledby="profile-tab">
                        <table id="datatable-info-inactive" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
                          <thead>
                            <tr>
                              <th>Ícone</th>
                              <th>Nome</th>
                              <th>Data</th>
                              <th>Ações</th>
                            </tr>
                          </thead>
                        </table>
                      </div><!--tab_content2-->
                    
                    </div><!--myTabContent-->
                  </div><!--tabpanel-->


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

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

  </div>
</div>

<?php include "includes/alertas.php"; ?>
<?php include "../_assets/inc/datatables.php"; ?>
<?php include "../_assets/inc/js_footer.php"; ?>

</body>

</html>
