<% layout('layouts/customer-boilerplate')  -%>
    <div class="row">
        <div class="col-6 mb-5">
            <div id="productCarousel" class="carousel slide" data-bs-ride="carousel">
                <div class="carousel-inner">
                    <% product.images.forEach((img, i)=>{%>
                        <div class="carousel-item <%= i=== 0 ? 'active' : '' %>">
                            <img src="<%= img.url %>" class="d-block" width="100%" height="500" alt="">
                        </div>
                        <% }) %>
                </div>
                <% if(product.images.length > 1) {%>
                    <button class="carousel-control-prev" type="button" data-bs-target="#productCarousel" data-bs-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Previous</span>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#productCarousel" data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Next</span>
                     </button>
                    <% } %>
            </div>

            <div class="card">

                <div class="card-body">
                    <% if (product.tags.includes('OnSale')) {%>
                        <span style="float: left; margin-right: 10px" class="badge bg-danger">OnSale</span>
                        <% } %>
                            <h5 class="card-title" style="text-transform: capitalize;">
                                <%= product.name %>
                            </h5>
                            <span class="card-text">
                                <%= product.description %>
                            </span>

                </div>

                <ul class="list-group list-group-flush">
                    <li class="list-group-item">
                        <%= product.price %> zl per
                            <%= product.quantity_type %>
                    </li>
                    <li class="list-group-item">
                        Available in stock:
                        <%= product.quantity %>
                            <%= product.quantity_type %>
                    </li>
                </ul>
                <% if (currentUser){%>
                    <% if (currentUser.isAdmin) {%>
                        <div class="card-body">
                            <a href="/admin/products/<%= product._id %>/edit" class="btn btn-primary">Edit</a>
                            <a href="/admin/products/<%= product._id %>/edit/photos" class="btn btn-info">Manage Photos</a>
                            <form class="d-inline" method="POST" action="/products/<%= product._id %>?_method=DELETE">
                                <button class="btn btn-danger">Delete</button>
                            </form>
                        </div>
                        <% } %>
                            <% } %>

            </div>
        </div>

        <div class="col-6 mb-5">
            <% if (currentUser){%>
                <% if (!currentUser.isAdmin) {%>
                    <div class="card">
                        <div class="card-body">
                            <input type="number" id="actual-user-input" value="1" onchange="updateHiddenQuantityValue()">
                        </div>
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">
                                <form method="POST" action="/shopping-cart/add">
                                    <input type="text" hidden name="productID" value="<%= product._id %>">
                                    <input type="text" hidden id="hidden-user-input" name="quantity" value="1">
                                    <input type="text" hidden name="userID" value="<% if (currentUser) {%><%= currentUser._id%><% } %>">
                                    <button class="btn btn-primary btn-lg">Add to card</button>

                                </form>
                            </li>
                        </ul>
                    </div>
                    <% } %>
                        <div style="margin-top: 40px;" class="container">
                            <h2>Leave a review</h2>
                            <form action="/products/<%= product._id %>/reviews" method="POST" novalidate class="mb-3 validated-form">
                                <fieldset class="starability-basic">
                                    <input type="radio" id="no-rate" class="input-no-rate" name="review[rating]" value="1" checked aria-label="No rating." />
                                    <input type="radio" id="first-rate1" name="review[rating]" value="1" />
                                    <label for="first-rate1" title="Terrible">1 star</label>
                                    <input type="radio" id="first-rate2" name="review[rating]" value="2" />
                                    <label for="first-rate2" title="Not good">2 stars</label>
                                    <input type="radio" id="first-rate3" name="review[rating]" value="3" />
                                    <label for="first-rate3" title="Average">3 stars</label>
                                    <input type="radio" id="first-rate4" name="review[rating]" value="4" />
                                    <label for="first-rate4" title="Very good">4 stars</label>
                                    <input type="radio" id="first-rate5" name="review[rating]" value="5" />
                                    <label for="first-rate5" title="Amazing">5 stars</label>
                                </fieldset>
                                <div class="mb-3">
                                    <label class="form-label" for="body">Share your experience:</label>
                                    <textarea name="review[body]" class="form-control" id="body" cols="30" rows="3" required></textarea>
                                    <div class="valid-feedback">
                                        Looks good!
                                    </div>
                                    <div class="invalid-feedback">
                                        Review is required
                                    </div>
                                </div>
                                <button class="btn btn-success">Submit</button>
                            </form>
                        </div>
                        <% } %>

                            <div class="container">
                                <% let reviews = product.reviews.reverse() %>
                                    <% for (let review of reviews) {%>
                                        <div class="card mb-3">
                                            <div class="card-body">
                                                <div class="d-flex">
                                                    <h6 class="card-title">
                                                        By: <b><%= review.author.username %></b>
                                                    </h6>
                                                    <em style="margin-left: auto;" class="small text-muted">
                                                <%= review.created_date.getDate()%>.<%= review.created_date.getMonth()%>.<%= review.created_date.getFullYear()%> <%= review.created_date.getHours()%>:<%= review.created_date.getMinutes()%>
                                                </em>
                                                </div>
                                                <p class="starability-result" data-rating="<%= review.rating %>">
                                                    Rated:
                                                    <%= review.rating %> stars
                                                </p>
                                                <span class="card-text">
                                                Review:
                                                <%= review.body %>
                                            </span>
                                                <% if (currentUser && review.author.equals(currentUser)) { %>
                                                    <form action="/products/<%= product._id %>/reviews/<%= review._id %>?_method=DELETE" method="POST">
                                                        <button class="btn btn-sm btn-danger">Delete</button>
                                                    </form>
                                                    <% } %>
                                            </div>
                                        </div>
                                        <% } %>
                            </div>
        </div>



    </div>

    <script>
        function updateHiddenQuantityValue() {
            const actualinput = document.getElementById('actual-user-input')
            const hiddeninput = document.getElementById('hidden-user-input')
            hiddeninput.setAttribute('value', actualinput.value)
        }
    </script>