NMandapaty/ArcticVoice

  <div id="map-canvas"></div>
  <div class="container-fluid" id="main"  style="overflow-y: hidden; padding-top: 20px; background-color: #f3f2f2;">
    <div class="row">

        <h2></h2>
        <% @posts.each do |post| %>

          <div class="col s12 m6">
              <div class="card white-grey">
                <div class="card-content black-text">
                  <a href="/posts/<%= post.id %>" class="card-title"> <%= post.title %> </a>
                  <p><%= raw(post.body) %></p>
                  <p> <%= post.location %> </p>
                </div>
                <% if post.user %>
                <div class="card-action">
                  <div> <b>Author:</b> <%= link_to post.user.name, post.user %> </div>
                </div>
                <% end %>
                <% if post.tags %>
                <div class="card-action">
                   <% post.tags.split(',').each do |tag| %>
                  <div class="chip"> <%= tag %> </div>
                  <% end %> 
                </div>
                <% end %>
                <div class="card-action">
                  <div id="<%= post.id %>" class="show-comments" style="color: blue;cursor: pointer;"> 
                    <a id="action-<%= post.id %>" class="waves-effect waves-light btn"><i style="font-size: 1.6rem;" class="small material-icons left ">comment</i> View Comments</a>
                  </div>

                  <% if post.comments.length != 0 %>
                    <div id="comments-<%= post.id %>" style="display:none;">
                      <div class="comment-list-<%= post.id %>">
                        <% post.comments.each do |comment| %>
                        <h5> <%= comment.title %> </h5>
                        <%= comment.comment %> <br>
                         <% if comment.user %> <b> By: </b> <%= link_to comment.user.name, comment.user %> <% end %> <br> <br>
                        <% end %>
                      </div>
                      <div class="comment-section">
                        <%= form_tag create_comment_path, method: "post" do %>
                          <%= hidden_field_tag "id", post.id %>
                            <%= text_field_tag(:title, "", :placeholder => "Comment Title (optional)", :style => "width:175px;") %>
                            <%= text_area_tag(:comment,"", :placeholder => "Add a comment...") %>
                            <button class="btn waves-effect waves-light" type="submit" name="commit">Submit
                            <i class="material-icons right">send</i>
                            </button>
                        <% end %>
                      </div>
                    </div>
                  <% else %>
                    <div id="comments-<%= post.id %>" style="display: none;" > (0 comments)
                      <div class="comment-section">
                        <%= form_tag create_comment_path, method: "post" do %>
                          <%= hidden_field_tag "id", post.id %>
                            <%= text_field_tag(:title, "", :placeholder => "Comment Title (optional)", :style => "width:175px;") %>
                            <%= text_area_tag(:comment,"", :placeholder => "Add a comment...") %>
                            <button class="btn waves-effect waves-light" type="submit" name="commit">Submit
                            <i class="material-icons right">send</i>
                            </button>
                        <% end %>
                      </div>
                    </div>
                  <% end %>
              </div>
          </div>
        </div>
      <% end %> 
    </div>
    <div class="col-xs-4"></div>
  </div>

  <!-- Scripts -->
  <%= javascript_tag do %>
      var posts = <%=raw @posts.to_json %>;
      window.authors = <%= raw @posts.map { |p| p.user.name }%>
      window.markers = new Array();
      posts.forEach(function(post) {
          window.markers.push({
              lat: post.latitude,
              lng: post.longitude,
              id: post.id,
              marker_title: post.title
          });
      });
  <% end %>

  <script> 
    $(document).ready(function () {
      $( ".show-comments" ).click(function() {
        var post_id = this.id;
        if ($("#comments-" + post_id + ":visible").length){
          $("#comments-" + post_id).hide();
          $("#action-" + post_id).html('<i style="font-size: 1.6rem;" class="small material-icons left ">comment</i> View Comments');
        } else{
          $("#comments-" + post_id).show();
          $("#action-" + post_id).html('<i style="font-size: 1.6rem;" class="small material-icons left ">comment</i> Hide Comments');
        }
      });
    });
  </script>

      <script async defer
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCFVlMvTZLC8tadlYb1IQ9VDjQrW5v1a5Y&callback=setupMarkers"></script>