<%- include('_header'); -%>

<nav class="breadcrumb">
    <ul>
        <li><a href="<%= urlPrefix %>/dashboard">Home</a></li>
        <li>
            <a href="<%= urlPrefix %>/lotOccupancies">
                <span class="icon is-small">
                    <span class="fa-layers fa-fw" aria-hidden="true">
                        <i class="fas fa-vector-square"></i>
                        <i class="fas fa-user" data-fa-transform="shrink-10"></i>
                    </span>
                </span>
                <span><%= configFunctions.getProperty("aliases.lots") %>
                    <%= configFunctions.getProperty("aliases.occupancies") %></span>
            </a>
        </li>
        <li class="is-active">
            <a href="#" aria-current="page">
                <%= configFunctions.getProperty("aliases.occupancy") %>: <%= lotOccupancy.lotName || ("(No " + configFunctions.getProperty("aliases.lot") + ")") %>
            </a>
        </li>
    </ul>
</nav>

<div class="level">
    <div class="level-left">
        <div class="level-item is-justify-content-left">
            <h1 class="title is-1">
                <%= configFunctions.getProperty("aliases.occupancy") %>: <%= lotOccupancy.lotName || ("(No " + configFunctions.getProperty("aliases.lot") + ")") %>
            </h1>
        </div>
    </div>
    <div class="level-right">
        <div class="level-item is-justify-content-right">
            <a class="button is-link is-hidden-print" href="<%= urlPrefix %>/lotOccupancies/<%= lotOccupancy.lotOccupancyId %>/print" target="_blank">
                <span class="icon is-small"><i class="fas fa-print" aria-hidden="true"></i></span>
                <span>Print</span>
            </a>
        </div>
    </div>
</div>

<% if (user.userProperties.canUpdate) { %>
<div class="fixed-container is-fixed-bottom-right mx-4 my-4 has-text-right is-hidden-print">
    <a class="button is-circle is-primary has-tooltip-left"
        data-tooltip="Update <%= configFunctions.getProperty("aliases.occupancy") %>"
        href="<%= urlPrefix %>/lotOccupancies/<%= lotOccupancy.lotOccupancyId %>/edit">
        <i class="fas fa-pencil-alt" aria-hidden="true"></i>
        <span class="sr-only">Update <%= configFunctions.getProperty("aliases.occupancy") %></span>
    </a>
</div>
<% } %>

<div class="panel">
    <div class="panel-block is-block">
        <div class="columns">
            <div class="column">
                <p>
                    <strong><%= configFunctions.getProperty("aliases.occupancy") %> Type</strong><br />
                    <%= lotOccupancy.occupancyType %>
                </p>
            </div>
            <div class="column">
                <p class="mb-2">
                    <strong><%= configFunctions.getProperty("aliases.lot") %></strong><br />
                    <% if (lotOccupancy.lotId) { %>
                        <a href="<%= urlPrefix %>/lots/<%= lotOccupancy.lotId %>"><%= lotOccupancy.lotName %></a>
                    <% } else { %>
                        <span class="has-text-grey">(No <%= configFunctions.getProperty("aliases.lot") %>)</span>
                    <% } %>
                </p>
                <p>
                    <strong><%= configFunctions.getProperty("aliases.map") %></strong><br />
                    <% if (lotOccupancy.mapId) { %>
                        <a href="<%= urlPrefix %>/maps/<%= lotOccupancy.mapId %>"><%= lotOccupancy.mapName %></a>
                    <% } else { %>
                        <span class="has-text-grey">(No <%= configFunctions.getProperty("aliases.map") %>)</span>
                    <% } %>
                </p>
            </div>
            <div class="column">
                <p class="mb-2">
                    <strong>Start Date</strong><br />
                    <%= lotOccupancy.occupancyStartDateString %>
                </p>
                <p>
                    <strong>End Date</strong><br />
                    <% if (lotOccupancy.occupancyEndDateString === "") { %>
                        <span class="has-text-grey">(No End Date)</span>
                    <% } else { %>
                        <%= lotOccupancy.occupancyEndDateString %>
                    <% } %>
                </p>
            </div>
            <% if (lotOccupancy.lotOccupancyFields.length > 0) { %>
                <div class="column">
                    <% for (const lotOccupancyField of lotOccupancy.lotOccupancyFields) { %>
                        <p class="mb-2">
                            <strong><%= lotOccupancyField.occupancyTypeField %></strong><br />
                            <% if (lotOccupancyField.lotOccupancyFieldValue) { %>
                                <%= lotOccupancyField.lotOccupancyFieldValue %>
                            <% } else { %>
                                <span class="has-text-grey">(No Value)</span>
                            <% } %>
                        </p>
                    <% } %>
                </div>
            <% } %>
        </div>
    </div>
</div>

<div class="panel">
    <h2 class="panel-heading">
        <%= configFunctions.getProperty("aliases.occupants") %>
    </h2>
    <div class="panel-block is-block">
        <% if (lotOccupancy.lotOccupancyOccupants.length === 0) { %>
        <div class="message is-warning">
            <p class="message-body">
                There are no <%= configFunctions.getProperty("aliases.occupants").toLowerCase() %>
                associated with this record.
            </p>
        </div>
        <% } else { %>
        <table class="table is-fullwidth is-striped is-hoverable">
            <thead>
                <tr>
                    <th><%= configFunctions.getProperty("aliases.occupant") %> Type</th>
                    <th><%= configFunctions.getProperty("aliases.occupant") %></th>
                    <th>Address</th>
                    <th>Phone Number</th>
                </tr>
            </thead>
            <tbody>
                <% for (const lotOccupancyOccupant of lotOccupancy.lotOccupancyOccupants) { %>
                <tr>
                    <td><%= lotOccupancyOccupant.lotOccupantType %></td>
                    <td><%= lotOccupancyOccupant.occupantName %></td>
                    <td>
                        <%= lotOccupancyOccupant.occupantAddress1 %><br />
                        <% if (lotOccupancyOccupant.occupantAddress2) { %>
                          <%= lotOccupancyOccupant.occupantAddress2 %><br />
                        <% } %>
                        <% if (lotOccupancyOccupant.occupantCity) { %>
                            <%= lotOccupancyOccupant.occupantCity %>, 
                        <% } %>
                        <%= lotOccupancyOccupant.occupantProvince %><br />
                        <%= lotOccupancyOccupant.occupantPostalCode %>
                    </td>
                    <td>
                        <%= lotOccupancyOccupant.occupantPhoneNumber %>
                    </td>
                </tr>
                <% } %>
            </tbody>
        </table>
        <% } %>
    </div>
</div>

<% if (lotOccupancy.lotOccupancyComments.length > 0) { %>
    <div class="panel">
        <h2 class="panel-heading">Comments</h2>
        <div class="panel-block is-block">
            <table class="table is-fullwidth is-striped is-hoverable">
                <thead>
                    <tr>
                        <th>Commentor</th>
                        <th>Comment Date</th>
                        <th>Comment</th>
                    </tr>
                </thead>
                <tbody>
                    <% for (const lotOccupancyComment of lotOccupancy.lotOccupancyComments) { %>
                        <tr>
                            <td><%= lotOccupancyComment.recordCreate_userName %></td>
                            <td>
                                <%= lotOccupancyComment.lotOccupancyCommentDateString %>
                                <%= (lotOccupancyComment.lotOccupancyCommentTime === 0 ? "" : lotOccupancyComment.lotOccupancyCommentTimeString) %>
                            </td>
                            <td><%= lotOccupancyComment.lotOccupancyComment %></td>
                        </tr>
                    <% } %>
                </tbody>
            </table>
        </div>
    </div>
<% } %>

<div class="columns">
    <div class="column">
        <div class="panel">
            <h2 class="panel-heading">Fees</h2>
            <div class="panel-block is-block">
                <% if (lotOccupancy.lotOccupancyFees.length === 0) { %>
                    <div class="message is-info">
                        <p class="message-body">
                            There are no fees applied to this <%= configFunctions.getProperty("aliases.occupancy").toLowerCase() %> record.
                        </p>
                    </div>
                <% } else { %>
                    <%
                        let feeAmountTotal = 0;
                        let taxAmountTotal = 0;
                    %>
                    <table class="table is-fullwidth is-striped is-hoverable">
                        <thead>
                            <tr>
                                <th>Fee</th>
                                <th class="has-text-right"><span class="is-sr-only">Unit Cost</span></th>
                                <th class="has-width-1"><span class="is-sr-only">&times;</span></th>
                                <th class="has-width-1 has-text-right"><span class="is-sr-only">Quantity</span></th>
                                <th class="has-width-1"><span class="is-sr-only">=</span></th>
                                <th class="has-width-1 has-text-right">Total</th>
                            </tr>
                        </thead>
                        <tbody>
                            <% for (const lotOccupancyFee of lotOccupancy.lotOccupancyFees) { %>
                                <%
                                    feeAmountTotal += (lotOccupancyFee.feeAmount * lotOccupancyFee.quantity);
                                    taxAmountTotal += (lotOccupancyFee.taxAmount * lotOccupancyFee.quantity);
                                %>
                                <tr>
                                    <td colspan="<%= (lotOccupancyFee.quantity === 1 ? "5" : "1") %>">
                                        <%= lotOccupancyFee.feeName %>
                                    </td>
                                    <% if (lotOccupancyFee.quantity !== 1) { %>
                                        <td class="has-text-right">$<%= lotOccupancyFee.feeAmount.toFixed(2) %></td>
                                        <td>&times;</td>
                                        <td class="has-text-right"><%= lotOccupancyFee.quantity %></td>
                                        <td>=</td>
                                    <% } %>
                                    <td class="has-text-right">$<%= (lotOccupancyFee.feeAmount * lotOccupancyFee.quantity).toFixed(2) %></td>
                                </tr>
                            <% } %>
                        </tbody>
                        <tfoot>
                            <tr>
                                <th colspan="5">Subtotal</th>
                                <td class="has-text-right has-text-weight-bold">$<%= feeAmountTotal.toFixed(2) %></td>
                            </tr>
                            <tr>
                                <th colspan="5">Tax</th>
                                <td class="has-text-right">$<%= taxAmountTotal.toFixed(2) %></td>
                            </tr>
                            <tr>
                                <th colspan="5">Grand Total</th>
                                <td class="has-text-right has-text-weight-bold">$<%= (feeAmountTotal + taxAmountTotal).toFixed(2) %></td>
                            </tr>
                        </tfoot>
                    </table>
                <% } %>
            </div>
        </div>
    </div>
    <div class="column">
        <div class="panel">
            <h2 class="panel-heading">Transactions</h2>
            <div class="panel-block is-block">
                <% if (lotOccupancy.lotOccupancyTransactions.length === 0) { %>
                    <div class="message is-info">
                        <p class="message-body">
                            There are no transactions associated with this <%= configFunctions.getProperty("aliases.occupancy").toLowerCase() %> record.
                        </p>
                    </div>
                <% } else { %>
                    <table class="table is-fullwidth is-striped is-hoverable">
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th><%= configFunctions.getProperty("aliases.externalReceiptNumber") %></th>
                                <th class="has-text-right">Amount</th>
                            </tr>
                        </thead>
                        <tbody>
                            <% for (const lotOccupancyTransaction of lotOccupancy.lotOccupancyTransactions) { %>
                                <tr>
                                    <td><%= lotOccupancyTransaction.transactionDateString %></td>
                                    <td>
                                        <%= lotOccupancyTransaction.externalReceiptNumber %><br />
                                        <small><%= lotOccupancyTransaction.transactionNote %></small>
                                    </td>
                                    <td class="has-text-right">
                                        $<%= lotOccupancyTransaction.transactionAmount.toFixed(2) %>
                                    </td>
                                </tr>
                            <% } %>
                        </tbody>
                    </table>
                <% } %>
            </div>
        </div>
    </div>
</div>

<%- include('_footerA'); -%>

<%- include('_footerB'); -%>