<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<%= form_for @publication, :html=> {:id => 'publicationsform'} do |f| %>

  <% if @publication.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@publication.errors.count, "error") %> impediram a gravação dessa publicação:</h2>
      <ul>
      <% @publication.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>
  <script>
  $('#publicationsform').data('serialize',$('#publicationsform').serialize()); // On load save form current state

$(window).bind('beforeunload', function(e){
    if($('#publicationsform').serialize()!=$('#publicationsform').data('serialize'))return true;
    else e=null; // i.e; if form state change show warning box, else don't show it.
});
window.onbeforeunload = function(){return "Deseja mesmo sair do site?"};
  </script>

  <div class="field">
    <%= f.label "Título" %><br>
    <%= f.text_field :title, class: "form-control" %>
  </div>
  <div class="field">
    <%= f.label "Descrição" %><br>
    <%= f.text_field :description, class: "form-control" %>
  </div>
  <div class="field">
    <%= f.label "Conteúdo" %><br>
    <%= f.text_area :content, class: "form-control" %>
  </div>
  <div>
    <img id="image_view" src="<%= @publication.image %>">
  </div>
  <div class="field" hidden>
    <%= f.label "Imagem" %>
    <%= f.text_field :image, class: "form-control" %>
  </div>
  <div>
    <button type="button" class="btn btn-default" id="image">Imagem</button>
  </div>
  <div class="field">
    <br><%= f.label "Descrição da Imagem" %><br>
    <%= f.text_area :image_description, class: "form-control" %>
  </div>
  <div id="highlight" class="field">
    <%= f.label "Notícia em Destaque" %>
    <%= f.check_box :highlight %>
  </div>
  <div id="highlight_time" class="field" style="display:none">
    <%= f.label "Departamento" %><br>
    <!--<--%= f.number_field :highlight_time, class: "form-control" %>-->
    <select>
      <option value="dpto1">Departamento de Análise Matemática</option>
      <option value="dpto2">Departamento de Estruturas Matemáticas</option>
      <option value="dpto3">Departamento de Geometria e Representação Gráfica</option>
      <option value="dpto4">Departamento de Informática e Ciências da Computação</option>
      <option value="dpto5">Departamento de Estatística</option>
      <option value="dpto6">Departamento de Matemática Aplicada</option>
    </select>
  </div>
  <div id="publication_date" class="field" style="display:none">
    <div class="form-group">
      <%= f.label "Data Limite de Destaque" %>
      <span data-toggle="tooltip" data-placement="right" title="Data limite para que a notícia fique em destaque.">
        <i class="material-icons">info_outline</i>
      </span>
      <div class='input-group date' id='datetimepicker8'>
        <span class="input-group-addon">
          <span class="fa fa-calendar"></span>
        </span>
        <%= datetimepicker_field(f, :limit_highlight_date) %>
      </div>
    </div>
  </div>

  <br>
  <div class="btn-group" role="group" aria-label="...">
    <%= button_tag(type: "submit", class: "btn btn-default btn-primary", name: "commit", value: "conceal") do %>
      Salvar
    <% end %>
    <%= link_to 'Descartar', root_path, class: 'btn btn-default' %>
  </div>
<% end %>

<script type="text/javascript">
  var loadImg = function() {
    var input = $("<input type='file'>").on('change',function() {
      if(this.files[0]){
        var img = /^image\//;
        var imgdata="";
        if(img.test(this.files[0].type)){
          var reader = new FileReader();
          reader.onload = function(e) {
            imgdata = e.target.result;
            $("#publication_image").val(imgdata);
            $("#image_view").attr('src',imgdata);
          };
          reader.readAsDataURL(this.files[0]);
        }
      }
    })
    input.click();
  }
  $("#image").on('click', loadImg);

  var show_highlight_fields = function() {
    var highlight_field = $('input[type=checkbox]').is(':checked');
    if(highlight_field) {
      document.getElementById('highlight_time').style.display = "block";
      document.getElementById('publication_date').style.display = "block";
    } else {
      document.getElementById('highlight_time').style.display = "none";
      document.getElementById('publication_date').style.display = "none";
    }
  }
  $("#highlight").on('click', show_highlight_fields);

  $(function () {
    $('#datetimepicker8').datetimepicker({
      icons: {
        date: "fa fa-calendar"
      },
      format: "DD/MM/YYYY",
      locale: "pt-br"
    });
    $('[data-toggle="tooltip"]').tooltip()
  });
</script>