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

<h1 class="title is-2 has-text-centered">
    <%= configFunctions.getProperty("aliases.lot") %>
    <%= configFunctions.getProperty("aliases.occupancy") %>
</h1>

<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) { %>
                <%= lotOccupancy.lotName %>
            <% } else { %>
                (No <%= configFunctions.getProperty("aliases.lot") %>)
            <% } %>
        </p>
        <p>
            <strong><%= configFunctions.getProperty("aliases.map") %></strong><br />
            <% if (lotOccupancy.mapId) { %>
                <%= lotOccupancy.mapName %>
            <% } else { %>
                (No <%= configFunctions.getProperty("aliases.map") %>)
            <% } %>
        </p>
    </div>
    <div class="column">
        <p class="mb-2">
            <strong>Start Date</strong><br />
            <%= lotOccupancy.occupancyStartDateString %>
        </p>
        <p>
            <strong>End Date</strong><br />
            <%= (lotOccupancy.occupancyEndDateString === "" ? "(No End Date)" : 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 />
                    <%= lotOccupancyField.lotOccupancyFieldValue || "(No Value)" %>
                </p>
            <% } %>
        </div>
    <% } %>
</div>

<section>
    <h2 class="title is-4"><%= configFunctions.getProperty("aliases.occupants") %></h2>

    <% 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">
            <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 !== "") { %>
                            <%= lotOccupancyOccupant.occupantAddress2 %><br />
                        <% } %>
                        <% if (lotOccupancyOccupant.occupantCity) { %>
                            <%= lotOccupancyOccupant.occupantCity %>, 
                        <% } %>
                        <%= lotOccupancyOccupant.occupantProvince %><br />
                        <%= lotOccupancyOccupant.occupantPostalCode %>
                    </td>
                    <td>
                        <%= lotOccupancyOccupant.occupantPhoneNumber %>
                    </td>
                </tr>
                <% } %>
            </tbody>
        </table>
    <% } %>
</section>

<% if (lotOccupancy.lotOccupancyComments.length > 0) { %>
<section class="mt-4">
    <h2 class="title is-4">Comments</h2>

    <table class="table is-fullwidth">
        <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>
</section>
<% } %>

<section class="mt-4">
    <h2 class="title is-4">Fees</h2>

    <% 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">
            <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>
    <% } %>
</section>

<section class="mt-4">
    <h2 class="title is-4">Transactions</h2>

    <% 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">
            <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>
    <% } %>
</section>

<%- include('_footer-print'); -%>