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

<div class="container">
    <div class="row">
        <div class="col-6">
            <div class="card mt-4">
                <div class="card-header text-center">
                    <h3>Item Details</h3>
                </div>

                <div class="card-body">
                    <div class="row">
                        <div class="col-3">
                            <p><b>Item Name :</b></p>
                        </div>
                        <div class="col-9">
                            <p><%= item.name %></p>
                        </div>
                        <hr>
                    </div>
                    <div class="row">
                        <div class="col-3">
                            <p><b>Category :</b></p>
                        </div>
                        <div class="col-9">
                            <p><%= item.category %></p>
                        </div>
                        <hr>
                    </div>
                    <div class="row">
                        <div class="col-3">
                            <p><b>Missing Date :</b></p>
                        </div>
                        <div class="col-9">
                            <p><%= item.date.toISOString().split('T')[0]  %></p>
                        </div>
                        <hr>
                    </div>
                    <div class="row">
                        <div class="col-3">
                            <p><b>Status :</b></p>
                        </div>
                        <div class="col-9">
                            <p><%= item.status %></p>
                        </div>
                        <hr>
                    </div>
                    <div class="row">
                        <div class="col-12 text-center">
                            <a class="btn" role="button" href="/users/dashboard/item/<%= item._id %>">Details</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mt-4 mb-4">
                <div class="card-header text-center">
                    <h3>Contact Details</h3>
                </div>

                <div class="card-body">
                    <div class="row">
                        <div class="col-12">
                            <p><b>Owner Details</b></p>
                        </div>
                        <hr>
                    </div>
                    <div class="row">
                        <div class="col-3">
                            <p><b>Username : </b></p>
                        </div>
                        <div class="col-9">
                            <p><%= owner.username %></p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-3">
                            <p><b>Email : </b></p>
                        </div>
                        <div class="col-9">
                            <p><%= owner.email %></p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-3">
                            <p><b>Mobile : </b></p>
                        </div>
                        <div class="col-9">
                            <p><%= owner.contact %></p>
                        </div>
                    </div>
                    <hr>
                    <div class="row">
                        <div class="col-12">
                            <p><b>Finder Details</b></p>
                            <hr>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-3">
                            <p><b>Username : </b></p>
                        </div>
                        <div class="col-9">
                            <p><%= finder.username %></p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-3">
                            <p><b>Email : </b></p>
                        </div>
                        <div class="col-9">
                            <p><%= finder.email %></p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-3">
                            <p><b>Mobile : </b></p>
                        </div>
                        <div class="col-9">
                            <p><%= finder.contact %></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    
        <div class="col-6">
            <div class="card mt-4">
                <% if(preferences===null) { %>
                    <div class="card-header text-center">
                        <h3>No preference set</h3>
                    </div>
                    <% if(currentUser===owner.username){ %>
                        <div class="card-body">
                            <div class="col-12 text-center">
                                <a href="/users/dashboard/session/<%=session._id %>/<%=session.item_id %>/preference" class="btn" role="button">Set Preference</a>
                            </div>
                        </div>
                    <% } %>
                <% } else { %>
                    <div class="card-header text-center">
                        <h3>Preferences</h3>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-4">
                                <p><b>Delivery Date : </b></p>
                            </div>
                            <div class="col-8">
                                <p><%= preferences.deliveryDate %></p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-4">
                                <p><b>Instructions : </b></p>
                            </div>
                            <div class="col-8">
                                <p><%= preferences.mode %></p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-4">
                                <p><b>From Time : </b></p>
                            </div>
                            <div class="col-8">
                                <p><%= preferences.fromTime %></p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-4">
                                <p><b>To Time : </b></p>
                            </div>
                            <div class="col-8">
                                <p><%= preferences.toTime %></p>
                            </div>
                        </div>
                <% } %>
                <% if(currentUser===owner.username){ %>
                        <div class="row mt-4">
                            <div class="col-3 offset-3">
                                <button class="btn" data-bs-toggle="modal" data-bs-target="#Found">Item Recieved</button>
                            </div>
                            <div class="col-3">
                                <button class="btn" data-bs-toggle="modal" data-bs-target="#Invalid">Not Your Item?</button>
                            </div>
                        </div>
                    </div>
                <% } %>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="Found" 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">Invalid</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="close"></button>
            </div>
            <div class="modal-body">
                <div class="container">
                    <div class="row">
                        <div class="col-12">
                            <p>Have you recieved your item?</p>
                        </div>
                    </div>
                    <form action="/users/dashboard/session/<%= session._id %>/<%=session.item_id %>/found" method="POST">
                        <div class="row mt-4">
                            <div class="col-12 text-center">
                                <button class="btn btn-primary" type="submit" name="button" value="<%= session._id %>">Confirm</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="Invalid" 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">Accept Item</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="close"></button>
            </div>
            <div class="modal-body">
                <div class="container">
                    <div class="row">
                        <div class="col-12">
                            <p>Is the item you recieved not the item you own?</p>
                        </div>
                    </div>
                    <form action="/users/dashboard/session/<%= session._id %>/<%=session.item_id %>/not_item" method="POST">
                        <div class="row mt-4">
                            <div class="col-12 text-center">
                                <button class="btn btn-primary" type="submit" name="verify" value="<%= session.item_id %>">Confirm</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>


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