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

<nav class="breadcrumb">
  <ul>
    <li><a href="<%= urlPrefix %>/dashboard">Home</a></li>
    <li>
        <a href="<%= urlPrefix %>/lots">
            <span class="icon is-small"><i class="fas fa-vector-square" aria-hidden="true"></i></span>
            <span><%= configFunctions.getProperty("aliases.lots") %></span>
        </a>
    </li>
    <% if (!isCreate) { %>
        <li>
            <a href="<%= urlPrefix %>/lots/<%= lot.lotId %>">
                <%= lot.lotName %>
            </a>
        </li>
    <% } %>
    <li class="is-active">
        <a href="#" aria-current="page">
            <% if (isCreate) { %>
            Create a New <%= configFunctions.getProperty("aliases.lot") %>
            <% } else { %>
            Update <%= configFunctions.getProperty("aliases.lot") %>
            <% } %>
        </a>
    </li>
  </ul>
</nav>

<h1 class="title is-1">
    <% if (isCreate) { %>
        Create a New <%= configFunctions.getProperty("aliases.lot") %>
    <% } else { %>
        <%= lot.lotName %>
    <% } %>
</h1>

<form id="form--lot">
    <input id="lot--lotId" name="lotId" type="hidden" value="<%= lot.lotId %>" />

    <div class="panel">
        <div class="panel-block is-block">
            <div class="columns">
                <div class="column">
                    <div class="field">
                        <label class="label" for="lot--lotName">
                            <%= configFunctions.getProperty("aliases.lot") %> Name
                        </label>
                        <div class="control">
                            <input class="input" id="lot--lotName" name="lotName" value="<%= lot.lotName %>" 
                                <% if (configFunctions.getProperty("settings.lot.lotNamePattern")) { %>
                                    pattern="<%= configFunctions.getProperty("settings.lot.lotNamePattern").source %>"
                                <% } %>
                                maxlength="100" 
                                required />
                        </div>
                    </div>
                </div>
                <div class="column">
                    <label class="label" for="lot--lotTypeId">
                        <%= configFunctions.getProperty("aliases.lot") %> Type
                    </label>
                    <div class="field has-addons">
                        <div class="control is-expanded">
                            <div class="select is-fullwidth">
                                <select id="lot--lotTypeId" name="lotTypeId" required>
                                    <% if (isCreate) { %>
                                        <option value="">(No Type)</option>
                                    <% } %>
                                    <% let typeIsFound = false; %>
                                    <% for (const lotType of lotTypes) { %>
                                        <% 
                                            if (lot.lotTypeId === lotType.lotTypeId) {
                                                typeIsFound = true;
                                            }
                                        %>
                                        <option value="<%= lotType.lotTypeId %>"
                                            <%= (lot.lotTypeId === lotType.lotTypeId ? " selected" : "") %>
                                            <%= (!isCreate && lot.lotTypeId !== lotType.lotTypeId ? " disabled" : "") %>>
                                            <%= lotType.lotType %>
                                        </option>
                                    <% } %>
                                    <% if (lot.lotTypeId && !typeIsFound) { %>
                                        <option value="<%= lot.lotTypeId %>" selected>
                                            <%= lot.lotType %>
                                        </option>
                                    <% } %>
                                </select>
                            </div>
                        </div>
                        <div class="control">
                            <button class="button is-unlock-field-button" data-tooltip="Unlock Field" type="button" aria-label="Unlock Field">
                                <i class="fas fa-unlock" aria-hidden="true"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="column">
                    <label class="label" for="lot--lotStatusId">
                        <%= configFunctions.getProperty("aliases.lot") %> Status
                    </label>
                    <div class="field">
                        <div class="control">
                            <div class="select is-fullwidth">
                                <select id="lot--lotStatusId" name="lotStatusId">
                                    <option value="">(No Status)</option>
                                    <% let statusIsFound = false; %>
                                    <% for (const lotStatus of lotStatuses) { %>
                                        <% 
                                            if (lot.lotStatusId === lotStatus.lotStatusId) {
                                                statusIsFound = true;
                                            }
                                        %>
                                        <option value="<%= lotStatus.lotStatusId %>"
                                            <%= (lot.lotStatusId === lotStatus.lotStatusId ? " selected" : "") %>>
                                            <%= lotStatus.lotStatus %>
                                        </option>
                                    <% } %>
                                    <% if (lot.lotStatusId && !statusIsFound) { %>
                                        <option value="<%= lot.lotStatusId %>" selected>
                                            <%= lot.lotStatus %>
                                        </option>
                                    <% } %>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="columns">
        <div class="column">
            <div class="panel">
                <h2 class="panel-heading">Geographic Location</h2>
                <div class="panel-block is-block">
                    <div class="field">
                        <label class="label" for="lot--lotLatitude">Latitude</label>
                        <div class="control">
                            <input class="input" id="lot--lotLatitude" name="lotLatitude" type="number" min="-90" max="90" step="0.00000001" value="<%= lot.lotLatitude %>" />
                        </div>
                    </div>
                    <div class="field">
                        <label class="label" for="lot--lotLongitude">Longitude</label>
                        <div class="control">
                            <input class="input" id="lot--lotLongitude" name="lotLongitude" type="number" min="-180" max="180" step="0.00000001" value="<%= lot.lotLongitude %>" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="column">
            <div class="panel">
                <h2 class="panel-heading">Image</h2>
                <div class="panel-block is-block">
                    <label class="label" for="lot--mapId"><%= configFunctions.getProperty("aliases.map") %></label>
                    <div class="field has-addons">
                        <div class="control is-expanded">
                            <div class="select is-fullwidth">
                                <select id="lot--mapId" name="mapId">
                                    <option value="" <%= (!isCreate && lot.mapId ? " disabled" : "") %>>
                                        (No <%= configFunctions.getProperty("aliases.map") %> Selected)
                                    </option>
                                    <% let mapIsFound = false; %>
                                    <% for (const map of maps) { %>
                                        <%
                                            if (lot.mapId === map.mapId) {
                                                mapIsFound = true;
                                            }
                                        %>
                                        <option value="<%= map.mapId %>"
                                            <%= (lot.mapId === map.mapId ? " selected" : "") %>
                                            <%= (!isCreate && lot.mapId !== map.mapId ? " disabled" : "") %>>
                                            <%= map.mapName || "(No Name)"  %>
                                        </option>
                                    <% } %>
                                    <% if (lot.mapId && !mapIsFound) { %>
                                        <option value="<%= lot.mapId %>" selected>
                                            <%= lot.mapName %>
                                        </option>
                                    <% } %>
                                </select>
                            </div>
                        </div>
                        <div class="control">
                            <button class="button is-unlock-field-button" data-tooltip="Unlock Field" type="button" aria-label="Unlock Field">
                                <i class="fas fa-unlock" aria-hidden="true"></i>
                            </button>
                        </div>
                    </div>
            
                    <div class="field">
                        <label class="label" for="lot--mapKey">
                            <%= configFunctions.getProperty("aliases.map") %> SVG ID
                        </label>
                        <div class="control">
                            <input class="input" id="lot--mapKey" name="mapKey" value="<%= lot.mapKey %>" maxlength="100" />
                        </div>
                        <p class="help">
                            <a href="https://cityssm.github.io/lot-occupancy-system/docs/mapImages.html" target="_blank" rel="noreferrer">
                                <i class="fa fa-question-circle" aria-hidden="true"></i>
                                What is the SVG ID?
                            </a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="panel mb-5">
        <h2 class="panel-heading">
            Additional Details
        </h2>
        <div class="panel-block"></div>
    </div>

    <div class="has-text-right mb-4 is-hidden-print">
        <button class="button is-primary" type="submit">
            <span class="icon is-small"><i class="fas fa-save" aria-hidden="true"></i></span>
            <span>
                <%= (isCreate ? "Create" : "Update") %>
                <%= configFunctions.getProperty("aliases.lot") %>
            </span>
        </button>
    </div>
</form>

<% if (isCreate) { %>
    <div class="message is-info">
        <p class="message-body">
            Additional options will be available after the record has been created.
        </p>
    </div>
<% } else { %>
    <div class="panel">
        <div class="panel-heading">
            <div class="level is-mobile">
                <div class="level-left">
                    <div class="level-item">
                        <h2 class="has-text-weight-bold is-size-5">
                            Comments
                        </h2>
                    </div>
                </div>
                <div class="level-right">
                    <div class="level-item">
                        <button class="button is-small is-success" id="lotComments--add" type="button">
                            <span class="icon is-small"><i class="fas fa-plus" aria-hidden="true"></i></span>
                            <span>Add a Comment</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel-block is-block" id="container--lotComments"></div>
    </div>
    
    <div class="panel">
        <div class="panel-heading">
            <div class="level is-mobile">
                <div class="level-left">
                    <div class="level-item">
                        <h2 class="has-text-weight-bold is-size-5">
                            <%= configFunctions.getProperty("aliases.occupancies") %>
                            <span class="tag"><%= lot.lotOccupancies.length %></span>
                        </h2> 
                    </div>
                </div>
                <div class="level-right">
                    <div class="level-item">
                        <a class="button is-success is-small has-text-weight-normal" href="<%= urlPrefix %>/lotOccupancies/new?lotId=<%= lot.lotId %>">
                            <span class="icon is-small"><i class="fas fa-plus" aria-hidden="true"></i></span>
                            <span>Create New <%= configFunctions.getProperty("aliases.occupancy") %></span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel-block is-block">
            <% if (lot.lotOccupancies.length === 0) { %>
            <div class="message is-info">
                <p class="message-body">There are no <%= configFunctions.getProperty("aliases.occupancy").toLowerCase() %> records asscociated with this <%= configFunctions.getProperty("aliases.lot") %>.</p>
            </div>
            <% } else { %>
            <table class="table is-fullwidth is-striped is-hoverable">
                <thead>
                <tr>
                    <th class="has-width-10">&nbsp;</th>
                    <th><%= configFunctions.getProperty("aliases.occupancy") %> Type</th>
                    <th>Start Date</th>
                    <th>End Date</th>
                    <th><%= configFunctions.getProperty("aliases.occupants") %></th>
                </tr>
                </thead>
                <tbody>
                <% const currentDate = dateTimeFunctions.dateToInteger(new Date()); %>
                <% for (const lotOccupancy of lot.lotOccupancies) { %>
                    <% const isActive = !(lotOccupancy.occupancyEndDate && lotOccupancy.occupancyEndDate < currentDate); %>
                    <tr>
                        <td class="has-text-centered">
                            <% if (isActive) { %>
                                <i class="fas fa-play" title="Current <%= configFunctions.getProperty("aliases.occupancy") %>"></i>
                            <% } else { %>
                                <i class="fas fa-stop" title="Previous <%= configFunctions.getProperty("aliases.occupancy") %>"></i>
                            <% } %>
                        </td>
                        <td>
                            <a class="has-text-weight-bold" href="<%= urlPrefix %>/lotOccupancies/<%= lotOccupancy.lotOccupancyId %>">
                                <%= lotOccupancy.occupancyType %>
                            </a>
                        </td>
                        <td><%= lotOccupancy.occupancyStartDateString %></td>
                        <td>
                            <% if (lotOccupancy.occupancyEndDate) { %>
                            <%= lotOccupancy.occupancyEndDateString %>
                            <% } else { %>
                                <span class="has-text-grey">(No End Date)</span>
                            <% } %>
                        </td>
                        <td>
                            <% if (lotOccupancy.lotOccupancyOccupants.length === 0) { %>
                                <span class="has-text-grey">(No <%= configFunctions.getProperty("aliases.occupants") %>)</span>
                            <% } else { %>
                                <% const occupant = lotOccupancy.lotOccupancyOccupants[0]; %>
                                <%= occupant.occupantName %>
                                <%= (lotOccupancy.lotOccupancyOccupants.length > 1 ? " plus " + (lotOccupancy.lotOccupancyOccupants.length - 1) : "") %>
                            <% } %>
                        </td>
                    </tr>
                <% } %>
                </tbody>
            </table>
            <% } %>
        </div>
    </div>
<% } %>

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

<script>
    exports.lotComments = <%- JSON.stringify(lot.lotComments) %>;
</script>
<script src="<%= urlPrefix %>/javascripts/lotEdit.min.js"></script>

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