<?php

session_start();

?>

<?php header('Content-Type: text/html; charset=utf-8'); ?><!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Esane CFT - Manager</title>

    <!-- Bootstrap -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/jquery.reject.css" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <link href="assets/css/dataTables.bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/style.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

  </head>
  <body>
      <?php
      
      if(empty($_SESSION["login"])){
      ?>
      <div class="modal fade" id="modalFormLogin">
          <div class="modal-dialog">
              <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">Autentificación</h4>
                  </div>
                  <div class="modal-body">
                      <div class="error-container"></div>
                      <form role="form">
                          <fieldset>
                              <div class="form-group">
                                  <label class="control-label">Nombre de usuario</label>
                                  <input type="text" id="tbxUsername" class="form-control" maxlength="20" placeholder="Ingrese el nombre de usuario">
                                  <span class="help-block">Campo obligatorio</span>
                              </div>
                              <div class="form-group">
                                  <label class="control-label">Contraseña</label>
                                  <input type="text" id="tbxPassword" class="form-control" maxlength="20" placeholder="Ingrese la contraseña">
                                  <span class="help-block">Campo obligatorio</span>
                              </div>
                          </fieldset>
                      </form>
                  </div>
                  <div class="modal-footer">
                      <button type="button" class="btn btn-primary" id="btnLogin">Login</button>
                  </div>
              </div>
          </div>
      </div>
          
      <?php    
      }else{
      ?>
      
      
      <div class="container" id="container-main">
          <div class="row">
              <div class="col-xs-12">
                  
                  <div class="panel panel-default" id="panelNoticias">
                        <div class="panel-heading">Noticias IEM</div>
                        <div class="panel-body">                    
                            <div class="row">
                                <div class="col-md-12">
                                    <table class="table table-hover" id="tblNoticias">
                                        <thead>
                                            <tr>
                                                
                                                <th class="col-md-6">Título</th>
                                                <th class="col-md-2">Fecha de creación</th>
                                                <th class="col-md-2">Fecha de publicación</th>
                                                <th class="col-md-2 no-sort"></th>
                                            </tr>
                                        </thead>
                                        <tbody>

                                        </tbody>
                                    </table>
                                </div>
                            </div>

                        </div>
                    </div>
                  
                  <div class="panel panel-default hidden" id="panelDetalle">
                      <div class="panel-heading"></div>
                        <div class="panel-body">    
                            <div class="row" id="img-default-alert">
                                <div class="col-md-12">
                                    <div class="alert alert-info" role="alert">Debe almacenar una imagen con nombre 'principal.jpg'.</div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-12">
                                    <h3>Imágenes</h3>
                                </div>
                            </div>
                            <div class="row" id="row-imagenes">
                            </div>

                            <hr/>
                            <div class="row">
                                <div class="col-xs-12">
                                    <h3>Editar Noticia</h3>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="control-label">Título</label>
                                        <input type="text" id="tbxDetalleTitulo" class="form-control" maxlength="255">
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-12">
                                    <textarea id="editor"></textarea>
                                 </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12 text-center">
                                    <br/><br/>
                                    <button type="button" class="btn btn-primary" id="btnGuardarDetalle">Guardar</button>
                                    <button type="button" class="btn btn-warning " id="btnVolverDetalle">Volver</button>
                                    <!--<button type="button" class="btn btn-success btnImagen" id="btnCargarImagen">Cargar Imagen</button>-->
                                    <span class="btn btn-success btn-file">
                                        Cargar Imagen<input id="btnCargarImagen" type="file" name="file" />
                                   </span>  
                                </div>
                            </div>
                        </div>
                  </div>
              </div>
          </div>
      </div> 
      
      
      <div class="modal fade" id="modalFormNoticia">
          <div class="modal-dialog">
              <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">Crear noticia</h4>
                  </div>
                  <div class="modal-body">
                      <div class="error-container"></div>
                      <form role="form">
                          <fieldset>
                              <div class="form-group">
                                  <label class="control-label">Título</label>
                                  <input type="text" id="tbxTitulo" class="form-control" maxlength="255">
                                  <span class="help-block">Campo obligatorio</span>
                              </div>
                          </fieldset>
                      </form>
                  </div>
                  <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                      <button type="button" class="btn btn-primary">Guardar</button>
                  </div>
              </div>
          </div>
      </div>
      
      <?php
          
      }
      ?>
      
      
      
    <script src="assets/js/jquery-1.12.0.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/jquery.dataTables.min.js"></script>
    <script src="assets/js/jquery.reject.js"></script>
    <script src="assets/js/tinymce/tinymce.min.js"></script>
    <script src="assets/js/ajax-config.js"></script>
    <script src="assets/js/dataTables.bootstrap.min.js"></script>
    <script src="assets/js/datatable-config.js"></script>
    <script src="assets/js/bootbox.min.js"></script>
    <script src="assets/js/mustache.min.js"></script>
    <script src="assets/js/loading-modal.js"></script>
    <script src="assets/js/moment.js"></script>
    <script src="assets/js/moment-es.js"></script>
    <script src="assets/js/clipboard.min.js"></script>
    <script src="assets/js/jquery.ui.widget.js"></script>
    <script src="assets/js/jquery.fileupload.js"></script>
    <script src="assets/js/jquery.iframe-transport.js"></script>
    
    <script src="assets/js/scripts.js"></script>
    
    
<script type="application/json" id="dataNoticias">
<?php
require_once './php/Noticia.php';
$noticias = Noticia::all(' ORDER BY fecha_creacion desc');
foreach($noticias as $noticia){
    $fechaArray = explode("-", $noticia->fecha_creacion);
    $noticia->ruta = $fechaArray[0]."/".$noticia->id;
}
echo json_encode($noticias);
?>
</script>

        <script id="templateBotones" type="x-tmpl-mustache">
            <div class="pull-right">
            <button type="button" class="btn btn-primary btn-xs btnEditar" data-toggle="tooltip" data-placement="left" title="Editar" data-id="{{id}}">
            <span class="glyphicon glyphicon-pencil"></span>
            </button>
            <button type="button" class="btn {{#publicado}}btn-success{{/publicado}}{{^publicado}}btn-warning{{/publicado}} btn-xs btnPublicar" data-toggle="tooltip" data-placement="left" title="{{#publicado}}Noticia publicada.{{/publicado}}{{^publicado}}Noticia no publicada{{/publicado}}" data-id="{{id}}">
                    <span class="glyphicon glyphicon-off"></span>
                </button>
            <button type="button" class="btn btn-danger btn-xs btnEliminar" data-toggle="tooltip" data-placement="left" title="Eliminar" data-id="{{id}}">
            <span class="glyphicon glyphicon-trash"></span>
            </button>
            </div>
        </script>
        <script  id="templateImagen" type="x-tmpl-mustache">
            {{#img}}
            <div class="col-xs-2" id="img_{{index}}">
                                    <div class="thumbnail">
                                        <img src="../news/{{ruta}}/{{nombre}}?var={{no_cache}}"/>
                                        <div class="caption">
                                            <p>{{nombre}}</p>
                                            <p class="text-center">
                                                <button data-clipboard-text="../news/{{ruta}}/{{nombre}}" class="btn btn-primary btnCopy" role="button"><span class="glyphicon glyphicon-share"></span></button> 
                                                
                                                <a href="#" class="btn btn-danger" role="button" data-id="{{index}}" data-nombre="{{nombre}}"><span class="glyphicon glyphicon-trash"></span></a>
                                            </p>
                                        </div>
                                    </div>
            </div>
            {{/img}}           
        </script>
  </body>
</html>
