<%- include("partials/app_header"); -%>

<div class="container">
    <div class="row">
        <% if(items.length!=0){ %>
            <% let y=items.length %>
            <% for(let i=y-1;i>-1;i--) { %>
                <% let type=items[i].img.content; %>
                <% let data=items[i].img.data; %>

                <div class="col-3">
                    <div class="card mt-4 mb-4">
                        <img src="data:image/<%=type %>;base64,<%= data.toString('base64') %>" class="card-img-top img-fluid img-thumbnail">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-6">Item Name</div>
                                <div class="col-6"><%= items[i].name %></div>
                            </div>
                            <hr>
                            <div class="row">
                                <div class="col-6">Last Seen</div>
                                <div class="col-6"><%= items[i].place %></div>
                            </div>
                            <hr>
                            <div class="row">
                                <% if(items[i].status==="Reported"&&(!items[i].owner.equals(username))){ %>
                                    <div class="col-6">
                                        <a class="btn btn-primary" role="button" href="/users/dashboard/item/<%= items[i]._id %>">Details</a>
                                    </div>
                                    <div class="col-6">
                                        <a class="btn btn-primary" role="button" href="/users/dashboard/report/file/<%= items[i]._id %>">Contact</a>
                                    </div>
                                <% }else{ %>
                                    <div class="col-12 text-center">
                                        <a class="btn btn-primary" role="button" href="/users/dashboard/item/<%= items[i]._id %>">Details</a>
                                    </div>
                                <% } %>
                            </div>
                        </div>
                    </div>
                </div>
            <%}%>
        <% }else { %>
            <div class="col-6 offset-3">
                <div class="card mt-4">
                    <div class="card-header">
                        <h3>There are no items reported missing yet</h3>
                    </div>
                </div>
            </div>
        <% } %>
    </div>
</div>

<div class="container">
    <% if(matchedItems.length!=0) { %>
        <div class="card mt-4 mb-4">
            <div class="card-body">
                <div class="row">
                    <div class="col-4">
                        <button class="btn" data-bs-toggle="modal" data-bs-target="#Modal">Filter</button>
                    </div>
                    <div class="col-4">
                        <a class="btn" href="/users/dashboard">Refresh</a>
                    </div>
                </div>
                <div class="row mt-2 ">
                    <div class="col-2">
                    <p class="fw-bold"> Name</p>
                    </div>
                    <div class="col-2">
                        <p class="fw-bold">Date</p>
                    </div>
                    <div class="col-2">
                        <p class="fw-bold">Category</p>
                    </div>
                    <div class="col-2">
                        <p class="fw-bold">Status</p>
                    </div>
                    <div class="col-2">
                        <p class="fw-bold">Details</p>
                    </div>
                    <div class="col-2">
                        <p class="fw-bold">Contact</p>
                    </div>
                </div>
                <hr>
                <%let i=0 %>
                <% matchedItems.forEach(function(item){ %>
                    <div class="row">
                        <div class="col-2">
                            <p><%= item.name %></p>
                        </div>
                        <div class="col-2">
                            <p><%= item.date.toISOString().split('T')[0] %></p>
                        </div>
                        <div class="col-2">
                            <p><%= item.category %></p>
                        </div>
                        <div class="col-2">
                            <p><%= item.status %></p>
                        </div>
                        <div class="col-2">
                            <a class="btn" role="button" href="/users/dashboard/item/<%= item._id %>">Details</a>
                        </div>
                        <% if(item.status==="Reported"){ %>
                            <% if(!(item.owner.equals(username))){ %>
                                <div class="col-2">
                                    <a class="btn" role="button" href="/users/dashboard/report/file/<%= item._id %>">Contact</a>
                                </div>
                            <% }else{ %>
                                <div class="col-2">
                                    <button class="btn" data-bs-toggle="modal" data-bs-target="#Alert">Contact</button>
                                </div>
                            <% } %>
                        <% }else{ %>
                            <div class="col-2">
                                <p>On Retrieval</p>
                            </div>
                        <% } %>
                    </div>
                    <hr>
                    <% i++ %>
                <%}) %>
            </div>
        </div>
    <% }else{ %>
        <div class="card mt-4 mb-2">
            <div class="card-body">
                <div class="row">
                    <div class="col-4">
                        <button class="btn" data-bs-toggle="modal" data-bs-target="#Modal">Filter</button>
                    </div>
                    <div class="col-4">
                        <a class="btn" href="/users/dashboard">Refresh</a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12 text-center">
                        <h3>No Matching Search Result Found</h3>
                    </div>
                </div>
            </div>
        </div>
    <% } %>
</div>

<div class="modal fade" id="Modal" tabindex="-1" aria-hidden="true" aria-labelledby="title">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="title">Filter</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="close"></button>
            </div>
            <div class="modal-body">
                <div class="container">
                    <form action="/users/dashboard" method="POST">
                        <div class="row mt-2">
                            <div class="col-6">
                                <label for="category" class="form-label">Category</label>
                                <select class="form-control" id="category" name="category">
                                    <option selected>Category</option>
                                    <option value="Electronics">Electronics</option>
                                    <option value="Stationary">Stationary</option>
                                    <option value="Cosmetics">Cosmetics</option>
                                </select>
                            </div>
                            <div class="col-6">
                                <label for="date" class="form-label">Date</label>
                                <input type="date" class="form-control" id="date" name="date">
                            </div>
                        </div>
                        <div class="row mt-4">
                            <div class="col-12 text-center">
                                <button class="btn btn-primary" type="submit" name="button">Save</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="Alert" tabindex="-1" aria-hidden="true" aria-labelledby="title">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="title">Alert</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="close"></button>
            </div>
            <div class="modal-body">
                <div class="container">
                    <p>You cannot contact yourself!</p>
                </div>
            </div>
        </div>
    </div>
</div>

<%- include("partials/footer"); -%>