<% include ../partials/header %>

<div class="row mb-2" style="display: flex;">
    <div id="col-with-map" class="col-md-5 mb-3">
        <% if(campground.location != ""){ %>
        <div id="map" class="jumbotron mb-0"></div>
        <% } else {%>
        <div id="map-placeholder" class="jumbotron mb-3 p-3 py-5">
            <h4>There should be a google map here...</h4>
            <p>...but when this campground was created, it's location wasn't specified.</p>
            <p>Try clicking <a href="http://www.google.com/search?q=<%= campground.name.replace(/\s/g, "+") %>">here</a> to search this campground on google!</p>
        </div>
        <% } %>
    </div>
    <div id="campground-image" class="col-md-7">
        <img class="img-fluid mb-3 d-block mx-auto rounded" src="<%= campground.image %>" onerror="this.onerror = null; this.src = '/placeholder.jpg'">
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header text-center">
                <h5 class="card-title"><a href="http://www.google.com/search?q=<%= campground.name.replace(/\s/g, "+") %>"><%= campground.name %></a></h5>
                <% if((currentUser && campground.author.id.equals(currentUser._id)) || (currentUser && currentUser.isAdmin)){ %>
                    <div class="btn-group mt-2">
                        <a class="btn btn-sm btn-warning" href="/campgrounds/<%= campground._id %>/edit">Edit</a>
                        <form class="delete-form btn-group" action="/campgrounds/<%= campground._id %>?_method=DELETE" method="POST">
                            <button class="btn btn-sm btn-danger">Delete</button>
                        </form>
                    </div>
                <% } %>
            </div>
            <div class="list-group" id="list-tab" role="tablist">
                <a class="list-group-item list-group-item-action rounded-0 border-left-0 border-right-0 active" id="campground-description-btn" data-toggle="list" href="#campground-description" role="tab" aria-controls="description">Description</a>
                <a class="list-group-item list-group-item-action rounded-0 border-left-0 border-right-0" id="campground-details-btn" data-toggle="list" href="#campground-details" role="tab" aria-controls="details">Details</a>
                <a class="list-group-item list-group-item-action rounded-0 border-left-0 border-right-0" id="ratings-btn" data-toggle="list" href="#ratings" role="tab" aria-controls="ratings">Ratings</a>
            </div>
            <div class="card-body">
                <div class="tab-content" id="nav-tabContent">
                    <div class="tab-pane fade show active" id="campground-description" role="tabpanel" aria-labelledby="campground-description-btn">
                        <p class="card-text text-justify"><%= campground.desc %></p>
                    </div>
                    <div class="tab-pane fade table-responsive" id="campground-details" role="tabpanel" aria-labelledby="campground-details-btn">
                        <table id="details-table" class="table table-bordered table-striped table-hover mb-0 text-left">
                            <tr>
                                <td class="p-1 text-center text-primary border-right-0 align-middle"><i class="fas fa-drafting-compass"></i></td>
                                <td class="p-1 border-left-0 align-middle">Location</td>
                                <td class="p-1 align-middle text-center"><%= campground.location ? campground.location : "N/A" %></td>
                            </tr>
                            <% var latSymbol = Math.sign(campground.lat) == 1 ? '° N' : '° S' %>
                            <% var lngSymbol = Math.sign(campground.lng) == 1 ? '° E' : '° W' %>
                            <tr>
                                <td class="p-1 text-center text-primary border-right-0 align-middle"><i class="fas fa-arrows-alt-h"></i></td>
                                <td class="p-1 border-left-0 align-middle">Latitude</td>
                                <td class="p-1 align-middle text-center"><%= Math.abs(campground.lat) ? campground.lat + latSymbol : "N/A" %></td>
                            </tr>
                            <tr>
                                <td class="p-1 text-center text-primary border-right-0 align-middle"><i class="fas fa-arrows-alt-v"></i></td>
                                <td class="p-1 border-left-0 align-middle">Longitude</td>
                                <td class="p-1 align-middle text-center"><%= Math.abs(campground.lng) ? campground.lng + lngSymbol : "N/A" %></td>
                            </tr>
                            <tr>
                                <td class="p-1 text-center text-success border-right-0 align-middle"><i class="fas fa-money-bill"></i></td>
                                <td class="p-1 border-left-0 align-middle">Price per night</td>
                                <td class="p-1 align-middle text-center">€<%= campground.price  %></td>
                            </tr>
                        </table>
                    </div>
                    <div class="tab-pane fade" id="ratings" role="tabpanel" aria-labelledby="ratings-btn">
                        <% if(!campground.rating.votesQuantity){ %>
                            <p class="text-center mb-0"><em style="color: grey;">No ratings have been submitted for this campground yet.</em></p>
                        <% } else{ %>
                            <% var vote5_percentage = 100/(campground.rating.votesQuantity/campground.rating.votes["5"]) %>
                            <% var vote4_percentage = 100/(campground.rating.votesQuantity/campground.rating.votes["4"]) %>
                            <% var vote3_percentage = 100/(campground.rating.votesQuantity/campground.rating.votes["3"]) %>
                            <% var vote2_percentage = 100/(campground.rating.votesQuantity/campground.rating.votes["2"]) %>
                            <% var vote1_percentage = 100/(campground.rating.votesQuantity/campground.rating.votes["1"]) %>
                            <div class="table-responsive">
                                <table class="table table-bordered table-sm mb-0 text-center align-middle">
                                    <tr>
                                        <th scope="col">Rating</th>
                                        <th scope="col">% of total votes</th>
                                        <th scope="col">Votes quantity</th>
                                    </tr>
                                    <tr>
                                        <td>
                                            5 <i class="fas fa-star text-warning"></i>
                                        </td>
                                        <td class="align-middle">
                                            <div class="progress">                            
                                                <div class="progress-bar" style="width: <%= vote5_percentage.toFixed(1) %>%; background-color: darkgreen;" role="progressbar" aria-valuenow="<%= campground.rating.votes["5"] %>" aria-valuemin="0" aria-valuemax="<%= campground.rating.votesQuantity %>">
                                                    <% if(vote5_percentage){ %><span class="text-light"><%= vote5_percentage.toFixed(1) %>%</span><% } %>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <%= campground.rating.votes["5"] %>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            4 <i class="fas fa-star text-warning"></i>
                                        </td>
                                        <td class="align-middle">
                                            <div class="progress">                            
                                                <div class="progress-bar bg-success" style="width: <%= vote4_percentage.toFixed(1) %>%" role="progressbar" aria-valuenow="<%= campground.rating.votes["4"] %>" aria-valuemin="0" aria-valuemax="<%= campground.rating.votesQuantity %>">
                                                    <% if(vote4_percentage){ %><span class="text-light"><%= vote4_percentage.toFixed(1) %>%</span><% } %>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <%= campground.rating.votes["4"] %>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            3 <i class="fas fa-star text-warning"></i>
                                        </td>
                                        <td class="align-middle">
                                            <div class="progress">                            
                                                <div class="progress-bar bg-warning" style="width: <%= vote3_percentage.toFixed(1) %>%" role="progressbar" aria-valuenow="<%= campground.rating.votes["3"] %>" aria-valuemin="0" aria-valuemax="<%= campground.rating.votesQuantity %>"><span class="text-dark">
                                                    <% if(vote3_percentage){ %><span class="text-dark"><%= vote3_percentage.toFixed(1) %>%</span><% } %>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <%= campground.rating.votes["3"] %>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            2 <i class="fas fa-star text-warning"></i>
                                        </td>
                                        <td class="align-middle">
                                            <div class="progress">                            
                                                <div class="progress-bar" style="width: <%= vote2_percentage.toFixed(1) %>%; background-color: darkorange;" role="progressbar" aria-valuenow="<%= campground.rating.votes["2"] %>" aria-valuemin="0" aria-valuemax="<%= campground.rating.votesQuantity %>">
                                                    <% if(vote2_percentage){ %><span class="text-dark"><%= vote2_percentage.toFixed(1) %>%</span><% } %>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <%= campground.rating.votes["2"] %>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            1 <i class="fas fa-star text-warning"></i>
                                        </td>
                                        <td class="align-middle">
                                            <div class="progress">                            
                                                <div class="progress-bar bg-danger" style="width: <%= vote1_percentage.toFixed(1) %>%" role="progressbar" aria-valuenow="<%= campground.rating.votes["1"] %>" aria-valuemin="0" aria-valuemax="<%= campground.rating.votesQuantity %>">
                                                    <% if(vote1_percentage){ %><span class="text-light"><%= vote1_percentage.toFixed(1) %>%</span><% } %>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <%= campground.rating.votes["1"] %>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        <% } %>
                    </div>
                </div>
            </div>
            <ul class="list-group list-group-flush">
                <li class="list-group-item text-left">
                    <small class="text-muted"><i class="fas fa-pen"></i> <em>Submitted by <a href="/users/<%=campground.author.id%>"><strong><%= campground.author.username %></strong></a> <%= moment(campground.createdAt).fromNow() %></em></small>
                </li>
                <li class="list-group-item">
                    <a class="btn btn-success pull-right" role="button" data-toggle="collapse" href="#collapseComment" aria-expanded="false" aria-controls="collapseComment">
                        <i class="fas fa-plus" id="comment-plus"></i><i class="fas fa-minus" id="comment-minus"></i> Add new comment
                    </a>
                </li>
            </ul>
            <div id="comments" class="card-header">
                <h5 class="card-title">Comments</h5>
            </div>
            <ul id="collapseComment" class="list-group list-group-flush collapse">
                <li class="list-group-item text-left" style="border-left: 2px solid #00C851;">
                    <% if(!currentUser) { %>
                        <!--If the user is not logged in, direct him to the login page-->
                        <p>You need to login before you can comment. <a href="/login">Click here</a> to go to the login page.</p>
                    <% } else{ %>
                        <form id="add-comment-form" action="/campgrounds/<%= campground._id %>/comments" method="POST">
                            <input class="form-control" type="text" disabled value="<%= currentUser.username %>">
                            <textarea class="form-control" name="comment[text]" placeholder="write your comment..." form="add-comment-form" rows="5" cols="70" maxlength="300"></textarea>
                            <button class="btn btn-success btn-sm mt-2">Add comment <i class="fas fa-comment"></i></button>
                        </form>
                    <% } %>
                </li>
            </ul>
            <ul class="list-group list-group-flush accordion-group" id="edit-comment-ul">
            <% if (campground.comments.length === 0) { %>
                <li class="list-group-item text-center">
                    <em style="color: grey;">No comments yet.</em>
                </li>
            <% } else{%>
            <% campground.comments.forEach(function(comment, index) { %>
                <li id="<%= comment._id %>" class="list-group-item text-left">
                    <p><a href="/users/<%= comment.author.id %>"><i class="fas fa-user <%= currentUser && (currentUser.username === comment.author.username) ? "text-warning" : "" %>"></i> <strong><%= comment.author.username %></strong></a>, <em><%= moment(comment.createdAt).fromNow() %></em></p>
                    <p><%= comment.text %></p>
                    <% if((currentUser && currentUser._id.equals(comment.author.id)) || (currentUser && currentUser.isAdmin)){ %>
                    <!--Edit button used for collapsing the edit comment form-->
                    <div class="btn-group">
                        <a class="btn btn-sm btn-warning" role="button" data-toggle="collapse" href="#collapse<%= comment._id %>" aria-expanded="false" aria-controls="collapse<%= comment._id %>" data-parent="#edit-comment-ul" onclick="collapseOtherElements('#edit-comment-ul')">
                            Edit
                        </a>
                        <!--Delete comment button-->
                        <form class="delete-form btn-group" action="/campgrounds/<%= campground._id %>/comments/<%= comment._id %>?_method=DELETE" method="POST">
                            <button class="btn btn-sm btn-danger">Delete</button>
                        </form>
                    </div>
                    <% } %>
                </li>
                <div id="collapse<%= comment._id %>" class="collapse">
                    <li class="list-group-item edit-comment-li" style="border-left: 2px solid #e0a800;">
                        <% if((currentUser && currentUser._id.equals(comment.author.id)) || (currentUser && currentUser.isAdmin)){ %>
                        <form id="comment_<%= comment._id %>_form" action="/campgrounds/<%= campground._id %>/comments/<%= comment._id %>?_method=PUT" method="POST">                        
                            <input class="form-control" type="text" disabled value="<%= currentUser.username %>">
                            <textarea class="form-control" name="comment[text]" placeholder="your comment text..." form="comment_<%= comment._id %>_form" rows="5" cols="70"><%= comment.text %></textarea>
                            <button class="btn btn-warning btn-sm mt-2">Edit comment</button>
                        </form>
                        <% } else{%>
                        <p>You need to login and own this comment, before you can edit it. <a href="/login">Click here</a> to go to the login page.</p>
                        <% } %>
                    </li>
                </div>
            <% }); %>
            <% } %>
            </ul>
        </div>
    </div>    
</div>

<% if(campground.location != ""){ %>
    <script>
        function initMap() {
            var lat = <%= campground.lat %>;
            var lng = <%= campground.lng %>;
            var center = {lat: lat, lng: lng };
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 5,
                center: center,
                scrollwheel: false,
                streetViewControl: false,
                mapTypeControl: false,
                scrollable: true,
                gestureHandling: 'cooperative'
            });
            var contentString = `
                <strong><%= campground.name %><br />
                <%= campground.location %></strong>
                <p><%= campground.description %></p>
            `
            var infowindow = new google.maps.InfoWindow({
                content: contentString
            });
            var marker = new google.maps.Marker({
                position: center,
                map: map
            });
            marker.addListener('click', function() {
                infowindow.open(map, marker);
            });
        }
    </script>
    <script async defer src='Map api here'></script>
<% } %>

    </div><!-- /.container -->

    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="/scripts/scripts.js"></script>
    
    <footer id="footer" class="footer navbar-expand-md justify-content-center">
			<div class="footer-copyright text-center py-3">
			    <a id="footer-campground-name" style="color: #124EC1" href="/">Yelp Camp</a> ©<%= moment().year() %> -
    			<a href="https://www.linkedin.com/in/jakub-wisniowski/">
    			    <strong style="font-size: 14px">
    				    <span style="color: #124EC1">createdBy</span><span style="color: #CE3021">:</span> 
    				    <span style="color: green">"Jakub Wiśniowski"</span><span style="color: #CE3021">;</span>
    			    </strong>
			    </a>
            </div>
    </footer>

    </body>
</html>