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

<nav class="breadcrumb">
  <ul>
    <li><a href="<%= urlPrefix %>/dashboard">Home</a></li>
    <li>
      <a href="<%= urlPrefix %>/workOrders">
          <span class="icon is-small"><i class="fas fa-hard-hat" aria-hidden="true"></i></span>
          <span>Work Orders</span>
      </a>
    </li>
    <% if (isCreate) { %>
      <li class="is-active">
          <a href="#" aria-current="page">
              Create a New Work Order
          </a>
      </li>
    <% } else { %>
      <li>
          <a href="<%= urlPrefix %>/workOrders/<%= workOrder.workOrderId %>" accesskey="v">
              Work Order #<%= workOrder.workOrderNumber || "(No Number)" %>
          </a>
      </li>
      <li class="is-active">
          <a href="#" aria-current="page">
              Update Work Order
          </a>
      </li>
    <% } %>
  </ul>
</nav>

<% if (isCreate) { %>
  <h1 class="title is-1">
      Create a New Work Order
  </h1>
<% } else { %>
  <h1 class="title is-1">
    Work Order #<%= workOrder.workOrderNumber || "(No Number)" %>
  </h1>
<% } %>

<div class="level is-fixed-bottom is-mobile has-background-white has-shadow is-hidden-print">
  <% if (!isCreate) { %>
    <div class="level-left">
      <span class="level-item has-text-weight-bold">
        Work Order
        #<%= workOrder.workOrderNumber || "(No Number)" %>
      </span>
    </div>
  <% } %>
  <div class="level-right">
    <% if (!isCreate && configFunctions.getProperty("settings.workOrders.prints").length > 0) { %>
      <% if (configFunctions.getProperty("settings.workOrders.prints").length === 1) { %>
        <div class="level-item">
          <a href="<%= urlPrefix %>/print/<%= configFunctions.getProperty("settings.workOrders.prints")[0] %>/?workOrderId=<%= workOrder.workOrderId %>" target="_blank">
            <span class="icon"><i class="fas fa-print" aria-hidden="true"></i></span>
            <span>Print</span>
          </a>
        </div>
      <% } else { %>
        <div class="level-item">
          <div class="dropdown is-right is-up">
            <div class="dropdown-trigger">
              <button class="button" type="button">
                <span class="icon"><i class="fas fa-print" aria-hidden="true"></i></span>
                <span>Print</span>
                <span class="icon"><i class="fas fa-angle-up" aria-hidden="true"></i></span>
              </button>
            </div>
            <div class="dropdown-menu">
              <div class="dropdown-content">
                <% for (const printName of configFunctions.getProperty("settings.workOrders.prints")) { %>
                  <% const printConfig = printFunctions.getPrintConfig(printName); %>
                  <% if (printConfig) { %>
                    <a class="dropdown-item" href="<%= urlPrefix %>/print/<%= printName %>/?workOrderId=<%= workOrder.workOrderId %>" target="_blank">
                      <span class="icon"><i class="fas fa-print" aria-hidden="true"></i></span>
                      <span><%= printConfig.title %></span>
                    </a>
                  <% } %>
                <% } %>
              </div>
            </div>
          </div>
        </div>
      <% } %>
    <% } %>
    <div class="level-item">
      <% if (!isCreate) { %>
        <div class="level-item">
          <div class="dropdown is-right is-up">
              <div class="dropdown-trigger">
                  <button class="button" type="button">
                      <span>More Options</span>
                      <span class="icon is-small"><i class="fas fa-angle-up" aria-hidden="true"></i></span>
                  </button>
              </div>
              <div class="dropdown-menu">
                  <div class="dropdown-content">
                      <a class="dropdown-item" id="button--deleteWorkOrder" href="#">
                          <span class="icon is-small">
                              <i class="fas fa-trash has-text-danger" aria-hidden="true"></i>
                          </span>
                          <span>Delete Work Order</span>
                      </a>
                  </div>
              </div>
          </div>
        </div>
      <% } %>
      <button class="button is-success" type="submit" form="form--workOrderEdit">
          <span class="icon is-small"><i class="fas fa-save" aria-hidden="true"></i></span>
          <span>
              <%= (isCreate ? "Create" : "Update") %>
              Work Order
          </span>
      </button>
    </div>
  </div>
</div>

<div class="columns is-desktop">
    <div class="column">
        <form id="form--workOrderEdit">
            <input id="workOrderEdit--workOrderId" name="workOrderId" type="hidden" value="<%= workOrder.workOrderId %>" />
            <div class="panel">
                <div class="panel-block is-block">
                    <div class="columns">
                        <div class="column">
                            <label class="label" for="workOrderEdit--workOrderNumber">Work Order Number</label>
                            <div class="field has-addons">
                                <div class="control is-expanded">
                                    <input class="input <%= (isCreate ? "" : " is-readonly") %>" id="workOrderEdit--workOrderNumber" name="workOrderNumber" type="text" value="<%= workOrder.workOrderNumber %>" maxlength="50" readonly accesskey="f" <%= (isCreate ? "" : " required") %> />
                                </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>
                            <% if (isCreate) { %>
                                <p class="help">Leave work order number blank to autopopulate.</p>
                            <% } %>
                        </div>
                        <div class="column">
                            <div class="field">
                                <label class="label" for="workOrderEdit--workOrderTypeId">Work Order Type</label>
                                <div class="control">
                                    <div class="select is-fullwidth">
                                        <select id="workOrderEdit--workOrderTypeId" name="workOrderTypeId" required <%= (isCreate ? " autofocus" : "") %>>
                                            <% if (isCreate && workOrderTypes.length > 1) { %>
                                                <option value="">(Select Type)</option>
                                            <% } %>
                                            <% for (const workOrderType of workOrderTypes) { %>
                                                <option value="<%= workOrderType.workOrderTypeId %>" <%= (workOrder.workOrderTypeId === workOrderType.workOrderTypeId ? " selected" : "") %>>
                                                    <%= workOrderType.workOrderType %>
                                                </option>
                                            <% } %>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="field">
                        <label class="label" for="workOrderEdit--workOrderDescription">Description</label>
                        <div class="control">
                            <textarea class="textarea" id="workOrderEdit--workOrderDescription" name="workOrderDescription"><%= workOrder.workOrderDescription %></textarea>
                        </div>
                    </div>
                    <div class="columns">
                        <div class="column">
                            <div class="field">
                                <label class="label" for="workOrderEdit--workOrderOpenDateString"><%= configFunctions.getProperty("aliases.workOrderOpenDate") %></label>
                                <div class="control has-icons-left">
                                    <%
                                        const currentDateString = dateTimeFunctions.dateToString(new Date());
                                    %>
                                    <input class="input" id="workOrderEdit--workOrderOpenDateString" name="workOrderOpenDateString" type="date" 
                                        value="<%= workOrder.workOrderOpenDateString %>"
                                        max="<%= workOrder.workOrderOpenDateString > currentDateString ? workOrder.workOrderOpenDateString : currentDateString %>"
                                        required />
                                    <span class="icon is-left">
                                        <i class="fas fa-calendar" aria-hidden="true"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="column">
                          <label class="label" for="workOrderEdit--workOrderCloseDateString"><%= configFunctions.getProperty("aliases.workOrderCloseDate") %></label>
                            <div class="field has-addons">
                                <div class="control is-expanded">
                                    <input class="input" id="workOrderEdit--workOrderCloseDateString" name="workOrderCloseDateString" type="date" value="<%= workOrder.workOrderCloseDateString %>" disabled readonly />
                                </div>
                                <div class="control">
                                  <button class="button is-light is-success is-outlined" id="button--closeWorkOrder" type="button">
                                    <span class="icon is-small"><i class="fas fa-stop-circle" aria-hidden="true"></i></span>
                                    <span>
                                        Close
                                    </span>
                                  </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        
        <% if (!isCreate) { %>
        <div class="panel mt-4">
            <h2 class="panel-heading">Related <%= configFunctions.getProperty("aliases.lots") %></h2>
            <div class="panel-block is-block">
                <%
                    const tabToSelect = (workOrder.workOrderLotOccupancies.length > 0 || workOrder.workOrderLots.length === 0 ? "lotOccupancies" : "lots");
                %>
                <div class="tabs is-boxed">
                    <ul>
                        <li class="<%= (tabToSelect === "lotOccupancies" ? "is-active" : "") %>">
                            <a href="#relatedTab--lotOccupancies">
                                <span><%= configFunctions.getProperty("aliases.occupancies") %></span>
                                <span class="ml-2 tag"></span>
                            </a>
                        </li>
                        <li class="<%= (tabToSelect === "lots" ? "is-active" : "") %>">
                            <a href="#relatedTab--lots">
                                <span><%= configFunctions.getProperty("aliases.lots") %></span>
                                <span class="ml-2 tag"></span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="tab-container">
                    <div class="<%= (tabToSelect === "lotOccupancies" ? "" : "is-hidden") %>" id="relatedTab--lotOccupancies">
                        <div class="box has-background-light has-text-right p-3">
                            <button class="button is-small is-success" id="button--addLotOccupancy" type="button">
                                <span class="icon is-small"><i class="fas fa-plus" aria-hidden="true"></i></span>
                                <span>Add Related <%= configFunctions.getProperty("aliases.occupancy") %></span>
                            </button>
                        </div>
                        <div id="container--lotOccupancies"></div>
                    </div>
                    <div class="<%= (tabToSelect === "lots" ? "" : "is-hidden") %>" id="relatedTab--lots">
                        <div class="box has-background-light has-text-right p-3">
                            <button class="button is-small is-success" id="button--addLot" type="button">
                                <span class="icon is-small"><i class="fas fa-plus" aria-hidden="true"></i></span>
                                <span>Add Related <%= configFunctions.getProperty("aliases.lot") %></span>
                            </button>
                        </div>
                        <div id="container--lots"></div>
                    </div>
                </div>
            </div>
        </div>
        <% } %>

        <% if (!isCreate) { %>
            <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="workOrderComments--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--workOrderComments"></div>
            </div>
        <% } %>
    </div>
    <% if (!isCreate) { %>
        <div class="column is-4-desktop">
            <div class="panel" id="panel--milestones">
                <div class="panel-heading">
                    <div class="level is-mobile">
                        <div class="level-left">
                            <div class="level-item">
                                <h2 class="title has-text-weight-bold is-5">Milestones</h2>
                            </div>
                        </div>
                        <div class="level-right">
                            <div class="level-item">
                                <button class="button is-small is-success" id="button--addMilestone" type="button">
                                    <span class="icon is-small"><i class="fas fa-plus" aria-hidden="true"></i></span>
                                    <span>Add Milestone</span>
                                </button>
                            </div>
                            <div class="level-item">
                                <div class="dropdown is-right has-text-weight-normal">
                                    <div class="dropdown-trigger">
                                        <button class="button is-small" type="button" aria-label="Options">
                                            <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
                                        </button>
                                    </div>
                                    <div class="dropdown-menu">
                                        <div class="dropdown-content">
                                            <a class="dropdown-item" href="<%= urlPrefix %>/api/<%= user.userProperties.apiKey %>/milestoneICS/?workOrderId=<%= workOrder.workOrderId %>">
                                                <span class="icon is-small"><i class="fas fa-calendar" aria-hidden="true"></i></span>
                                                <span>Download iCalendar</span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <% } %>
</div>


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

<% if (!isCreate) { %>
<script>
    exports.workOrderComments = <%- JSON.stringify(workOrder.workOrderComments) %>;
    exports.workOrderLots = <%- JSON.stringify(workOrder.workOrderLots) %>;
    exports.workOrderLotOccupancies = <%- JSON.stringify(workOrder.workOrderLotOccupancies) %>;
    exports.workOrderMilestones = <%- JSON.stringify(workOrder.workOrderMilestones) %>;
    
    exports.lotStatuses = <%- JSON.stringify(lotStatuses) %>;
    exports.workOrderMilestoneTypes = <%- JSON.stringify(workOrderMilestoneTypes) %>;
</script>
<% } %>
<script src="<% urlPrefix %>/javascripts/workOrderEdit.min.js"></script>

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