{% extends "base.html" %}
{% set currentPage = "allBudgets" %}

{% block body %}

<h1> Budget Summary </h1>

<!--Menu-->
<ul class="nav nav-tabs">
  {% for menuItem in cfg["committee"] %}
    <li role="presentation"><a href="{{menuItem['link']}}">{{menuItem['title']}}</a></li>
  {% endfor %}
  {% if fac is not none %}
  <li style="float: right;"><a href="/{{username}}/download/{{downloadFileName}}"><span class="glyphicon glyphicon-download-alt"></span> Download Budgets</a></li>
  {% endif %}
</ul>
<p></p>
<div class = "row" style = "margin-bottom: 20px; margin-top: 20px;"><strong style = "font-size: 125%;">Filter by Status: </strong> 
  {% for status in cfg["projectStatus"] %}
    <input  style = "margin-left: 10px; font-size: 125%;" 
            type="checkbox" 
            name="status" 
            id = "{{status}}"
            value="{{status}}"
            checked
            onchange = "updateFilters();">
    <label  for='{{status}}' 
            class = 'control-label'>
      {{cfg["projectStatus"][status]}}
    </label>
  {% endfor %}
</div>
<p></p>
<div class = "row">
  <table class = "table table-striped table-hover table-sm">
    <tr>
      <th>Faculty/Proj. Title</th>
      <th>Project Status</th>
      {% for title in cfg["budget"]%}
      <th>
        {{title["title"]}}
      </th>
      {% endfor %}
      <th style = "text-align: right; padding-right: 20px;">Total</th>
    </tr>
    {% if fac is not none %}
      {% for person in fac %}
        <tr id="row{{loop.index0}}" name = "leRow">
          <td>
            {{person.username.firstname}} {{person.username.lastname}} <span class = "small">({{person.programID.name}})</span>
            <br />
            <span class = "small">{{person.pID.title|truncate(50, True)}}</span>
          </td>
          <td id = "{{person.pID.pID}}-status" name = "projectStatus">
            {{person.pID.status}}
          </td>
          {% for field in cfg["budget"] %} 
            <td name = "rowValue" 
                class = "{{field['amountFieldName']}}" 
                id = "col{{loop.index0}}" 
                style = "padding-right: 30px; text-align: right;"
                >
              <a data-toggle="popover"
            data-trigger="focus"
            data-content="{{person.pID.budgetID[field['descFieldName']]}}"
            data-placement="right"
            class="more-info"
            tabindex="0"
            role="button">
  	    {# FIXME: does not calculate correctly for miles traveled (convert to dollars). Needs an if id = mileage... multiply by mileage rate from parameters #}
              {% if field['amountFieldName'] == "miles" %}
                {{ (person.pID.budgetID[field['amountFieldName']]|float  * params.mileageRate|float)|round(2)  }} 
              {% else %} 
                {{person.pID.budgetID[field['amountFieldName']]}} 
              {% endif %}
              </a>
            </td>
          {% endfor %}
          
          <th id = "rowTotal{{loop.index0}}"
              style = "padding-right: 30px; text-align: right;"
              >
          </th>
        </tr>
      
      {% endfor %}
    {% endif %}
    
    <tr>
      <th>Total</th>
      <th></th>
      {% for field in cfg["budget"] %} 
      <th id = "columnTotal{{loop.index0}}" 
          style = "padding-right: 30px; text-align: right;"
          >
      </th>
      {% endfor %}
      <th id = "grandTotal"
          style = "padding-right: 30px; text-align: right;"
          >
      </th>
    </tr>
  </table>
</div>


<script>
  {% if fac is not none %}
  var numRows = {{fac|count}};
  {% endif %}
  $('#incomplete').attr('checked', false);
  
  $("[ data-toggle='popover']").popover();
</script>

{% endblock %}
