<div id="figuresForm" style="display: none">
  <div class="card__title bold"><span id="periodTitle"></span> Financials</div>
  <input type="hidden" id="financials_id" value="0" />

  <ons-list>
    <ons-list-header>Form Options</ons-list-header>

    <div class="modcon">
      <div class="bmodl" id="showFieldsDesc">
        Show input fields used in all tools:
      </div>
      <div class="bmodr push">
        <ons-switch
          id="switch1"
          onchange="showAdditionalFields(this.checked)"
        ></ons-switch>
      </div>
    </div>

    <div class="modcon2" style="clear: both">
      <!--
          cloud-download
          cloud-upload
        -->
      <div style="width: 50%; float: left">
        <ons-button
          class="bmod push"
          modifier="outline light"
          onclick="cancelEditingFinancials()"
          title="Save Inputs to Storage"
        >
          <ons-icon icon="md-arrow-back"></ons-icon> Cancel
        </ons-button>
        <ons-button
          class="bmod push"
          modifier="outline light"
          onclick="clearFormData()"
        >
          <ons-icon class="bicon" icon="md-close-circle"></ons-icon> Clear Form
        </ons-button>
      </div>
      <div style="width: 50%; float: left; text-align: right"></div>
      <br /><br />
    </div>

    <ons-list-header class="field tool0 tool1 tool2"
      >Period for This set of Financials</ons-list-header
    >
    <ons-list-item class="input-items-month field tool0 tool1 tool2">
      <div class="left pink"></div>
      <div class="center">
        Financials Start &nbsp;(Month/Year)&nbsp; &nbsp;

        <ons-select id="monthStart">
          <option value="">Select...</option>
          <option value="January">January</option>
          <option value="February">February</option>
          <option value="March">March</option>
          <option value="April">April</option>
          <option value="May">May</option>
          <option value="June">June</option>
          <option value="July">July</option>
          <option value="August">August</option>
          <option value="September">September</option>
          <option value="October">October</option>
          <option value="November">November</option>
          <option value="December">December</option>
        </ons-select>
        /
        <ons-input
          id="yearStart"
          float
          maxlength="4"
          type="number"
          placeholder="YYYY"
        ></ons-input>
      </div>

      <div class="right">
        <ons-icon
          icon="md-help"
          class="help"
          onclick="showPopover(this, 'This is the month and year from where your financials start.')"
        ></ons-icon>
      </div>
    </ons-list-item>

    <ons-list-item class="input-items-month field tool0 tool1 tool2">
      <div class="left pink"></div>
      <div class="center">
        Financials End &nbsp;(Month/Year)&nbsp; &nbsp;

        <ons-select id="monthEnding">
          <option value="">Select...</option>
          <option value="January">January</option>
          <option value="February">February</option>
          <option value="March">March</option>
          <option value="April">April</option>
          <option value="May">May</option>
          <option value="June">June</option>
          <option value="July">July</option>
          <option value="August">August</option>
          <option value="September">September</option>
          <option value="October">October</option>
          <option value="November">November</option>
          <option value="December">December</option>
        </ons-select>
        /
        <ons-input
          id="yearEnding"
          float
          maxlength="4"
          type="number"
          placeholder="YYYY"
        ></ons-input>
      </div>

      <div class="right">
        <ons-icon
          icon="md-help"
          class="help"
          onclick="showPopover(this, 'This is the month and year from where your financials start.')"
        ></ons-icon>
      </div>
    </ons-list-item>

    <ons-list-header class="field tool0 tool1 tool2"
      >Base Numbers</ons-list-header
    >
    <ons-list-item class="input-items field tool0 tool1 tool2">
      <div class="left pink">
        Revenue&nbsp;&nbsp;<span class="currencySymbol"></span>
      </div>
      <label class="center">
        <ons-input
          id="revenue"
          float
          maxlength="20"
          type="number"
          placeholder="0.00"
        ></ons-input>
      </label>
      <div class="right">
        <ons-icon
          icon="md-help"
          class="help"
          onclick="showPopover(this, 'Referenced as \'Revenue\' or \'Turnover\' in your financial statements')"
        ></ons-icon>
      </div>
    </ons-list-item>

    <ons-list-item class="input-items field tool0 tool1 tool2">
      <div class="left">
        Cost of Sales (COGS)&nbsp;&nbsp;<span class="currencySymbol"></span>
      </div>
      <label class="center">
        <ons-input
          id="cogs"
          float
          maxlength="20"
          type="number"
          placeholder="0.00"
        ></ons-input>
      </label>
      <div class="right">
        <ons-icon
          icon="md-help"
          class="help"
          onclick="showPopover(this, 'Referenced as \'Cost of Sales\' in your financial statements')"
        ></ons-icon>
      </div>
    </ons-list-item>

    <ons-list-item class="input-items field tool0 tool1 tool2">
      <div class="left">
        Gross Profit&nbsp;&nbsp;<span class="currencySymbol"></span>
      </div>
      <label class="center">
        <ons-input
          id="grossProfit"
          float
          maxlength="20"
          type="number"
          placeholder="0.00"
        ></ons-input>
      </label>
      <div class="right">
        <ons-icon
          icon="md-help"
          class="help"
          onclick="showPopover(this, 'Referenced as \'Gross Profit\' in your financial statements')"
        ></ons-icon>
      </div>
    </ons-list-item>

    <ons-list-item class="input-items field tool0 tool1 tool2">
      <div class="left">
        EBIT&nbsp; (Earning Before Interest & Tax)&nbsp;&nbsp;<span
          class="currencySymbol"
        ></span>
      </div>
      <label class="center">
        <ons-input
          id="ebit"
          float
          maxlength="20"
          type="number"
          placeholder="0.00"
        ></ons-input>
      </label>
      <div class="right">
        <ons-icon
          icon="md-help"
          class="help"
          onclick="showPopover(this, 'Referenced as \'Operating Profit\' in your financial statements')"
        ></ons-icon>
      </div>
    </ons-list-item>

    <ons-list-item class="input-items field tool1">
      <div class="left">
        NET Profit (after TAX)&nbsp;&nbsp;<span class="currencySymbol"></span>
      </div>
      <label class="center">
        <ons-input
          id="netProfit"
          float
          maxlength="20"
          type="number"
          placeholder="0.00"
        ></ons-input>
      </label>
      <div class="right">
        <ons-icon
          icon="md-help"
          class="help"
          onclick="showPopover(this, 'Referenced as \'Profit after Taxation\' in your financial statements')"
        ></ons-icon>
      </div>
    </ons-list-item>
  </ons-list>

  <ons-list>
    <ons-list-header class="field tool0 tool1"
      >Other Information</ons-list-header
    >
    <ons-list-item class="input-items field tool0 tool1">
      <div class="left pink">
        Depreciation & Amortisation&nbsp;&nbsp;<span
          class="currencySymbol"
        ></span>
      </div>
      <label class="center">
        <ons-input
          id="depreciation"
          float
          maxlength="20"
          type="number"
          placeholder="0.00"
        ></ons-input>
      </label>
      <div class="right">
        <ons-icon
          icon="md-help"
          class="help"
          onclick="showPopover(this, 'Referenced as \'Depreciation\' under \'Admin expenses\'in your financial statements')"
        ></ons-icon>
      </div>
    </ons-list-item>

    <ons-list-item class="input-items field tool1">
      <div class="left">
        Intrest Paid&nbsp;&nbsp;<span class="currencySymbol"></span>
      </div>
      <label class="center">
        <ons-input
          id="interestPaid"
          float
          maxlength="20"
          type="number"
          placeholder="0.00"
        ></ons-input>
      </label>
      <div class="right">
        <ons-icon
          icon="md-help"
          class="help"
          onclick="showPopover(this, 'Referenced as \'Interest Paid/Received\' in your financial statements')"
        ></ons-icon>
      </div>
    </ons-list-item>

    <ons-list-item class="input-items field tool1">
      <div class="left">
        Other Income/Rechargeable Expenses&nbsp;&nbsp;<span
          class="currencySymbol"
        ></span>
      </div>
      <label class="center">
        <ons-input
          id="otherIncome"
          float
          maxlength="20"
          type="number"
          placeholder="0.00"
        ></ons-input>
      </label>
      <div class="right">
        <ons-icon
          icon="md-help"
          class="help"
          onclick="showPopover(this, 'Referenced as \'Other Income\' below \'Operating Profit\' in your financial statements')"
        ></ons-icon>
      </div>
    </ons-list-item>

    <ons-list-item class="input-items field tool1">
      <div class="left">
        Dividends&nbsp;&nbsp;<span class="currencySymbol"></span>
      </div>
      <label class="center">
        <ons-input
          id="dividends"
          float
          maxlength="20"
          type="number"
          placeholder="0.00"
        ></ons-input>
      </label>
      <div class="right">
        <ons-icon
          icon="md-help"
          class="help"
          onclick="showPopover(this, 'Referenced as \'Dividends\' in your financial statements')"
        ></ons-icon>
      </div>
    </ons-list-item>
  </ons-list>

  <div class="card__title bold">Balance Sheet</div>

  <ons-list>
    <ons-list-header class="field tool0 tool1 tool2">Assets</ons-list-header>
    <ons-list-item class="input-items field tool0 tool1">
      <div class="left pink">
        Cash in Bank&nbsp;&nbsp;<span class="currencySymbol"></span>
      </div>
      <label class="center">
        <ons-input
          id="cashAtBank"
          float
          maxlength="20"
          type="number"
          placeholder="0.00"
        ></ons-input>
      </label>
      <div class="right">
        <ons-icon
          icon="md-help"
          class="help"
          onclick="showPopover(this, 'Referenced as \'Cash in Bank and at Hand\' in your financial statements')"
        ></ons-icon>
      </div>
    </ons-list-item>

    <ons-list-item class="input-items field tool0 tool1 tool2">
      <div class="left">
        Trade Debtors&nbsp;&nbsp;<span class="currencySymbol"></span>
      </div>
      <label class="center">
        <ons-input
          id="tradeDebtors"
          float
          maxlength="20"
          type="number"
          placeholder="0.00"
        ></ons-input>
      </label>
      <div class="right">
        <ons-icon
          icon="md-help"
          class="help"
          onclick="showPopover(this, 'Referenced as \'Accounts Receivable\' or \'Trade Debtors\' in your financial statements')"
        ></ons-icon>
      </div>
    </ons-list-item>

    <ons-list-item class="input-items field tool0 tool1 tool2">
      <div class="left">
        <span id="spanFinancialsIndustryVarWipStock"></span>&nbsp;&nbsp;<span
          class="currencySymbol"
        ></span>
      </div>
      <label class="center">
        <ons-input
          id="stockWip"
          float
          maxlength="20"
          type="number"
          placeholder="0.00"
        ></ons-input>
      </label>
      <div class="right">
        <ons-icon
          icon="md-help"
          class="help"
          onclick="showPopover(this, 'Referenced as \'Stock\' or \'Work in Progress\' in your financial statements')"
        ></ons-icon>
      </div>
    </ons-list-item>

    <ons-list-item class="input-items field tool0">
      <div class="left">
        Total Current Assets&nbsp;&nbsp;<span class="currencySymbol"></span>
      </div>
      <label class="center">
        <ons-input
          id="totalCurrentAssets"
          onchange="calculateTotalAssets()"
          float
          maxlength="20"
          type="number"
          placeholder="0.00"
        ></ons-input>
      </label>
      <div class="right">
        <ons-icon
          icon="md-help"
          class="help"
          onclick="showPopover(this, 'Referenced as \'Total Current Assets\' in your financial statements')"
        ></ons-icon>
      </div>
    </ons-list-item>

    <ons-list-item class="input-items field tool0">
      <div class="left">
        Fixed Assets&nbsp;&nbsp;<span class="currencySymbol"></span>
      </div>
      <label class="center">
        <ons-input
          id="fixedAssets"
          onchange="calculateTotalAssets()"
          float
          maxlength="20"
          type="number"
          placeholder="0.00"
        ></ons-input>
      </label>
      <div class="right">
        <ons-icon
          icon="md-help"
          class="help"
          onclick="showPopover(this, 'Referenced as \'Fixed Assets\' in your financial statements')"
        ></ons-icon>
      </div>
    </ons-list-item>

    <ons-list-item class="input-items tool0">
      <div class="left">
        Total Assets&nbsp;&nbsp;<span class="currencySymbol"></span>
      </div>
      <label class="center">
        <ons-input
          aria-disabled="true"
          disabled
          id="totalAssets"
          float
          maxlength="20"
          type="number"
          placeholder="0.00"
        ></ons-input>
      </label>
      <div class="right">
        <ons-icon
          icon="md-help"
          class="help"
          onclick="showPopover(this, 'This is calculated automatically \'Total Current Assets\' plus \'Fixed Assets\'')"
        ></ons-icon>
      </div>
    </ons-list-item>
  </ons-list>

  <ons-list>
    <ons-list-header class="field tool0 tool1 tool2"
      >Liabilities</ons-list-header
    >

    <ons-list-item class="input-items field tool0 tool1 tool2">
      <div class="left pink">
        Trade Creditors&nbsp;&nbsp;<span class="currencySymbol"></span>
      </div>
      <label class="center">
        <ons-input
          id="tradeCreditors"
          float
          maxlength="20"
          type="number"
          placeholder="0.00"
        ></ons-input>
      </label>
      <div class="right">
        <ons-icon
          icon="md-help"
          class="help"
          onclick="showPopover(this, 'Referenced as \'Accounts Payable\' or \'Trade Creditors\' in your financial statements')"
        ></ons-icon>
      </div>
    </ons-list-item>

    <ons-list-item class="input-items field tool0 tool1 tool2">
      <div class="left pink">
        Deferred Revenue&nbsp;&nbsp;<span class="currencySymbol"></span>
      </div>
      <label class="center">
        <ons-input
          id="deferredRevenue"
          float
          maxlength="20"
          type="number"
          placeholder="0.00"
        ></ons-input>
      </label>
      <div class="right">
        <ons-icon
          icon="md-help"
          class="help"
          onclick="showPopover(this, 'Deffered Revenue TODO: description')"
        ></ons-icon>
      </div>
    </ons-list-item>

    <ons-list-item class="input-items field">
      <div class="left">
        Total Current Liabilities&nbsp;&nbsp;<span
          class="currencySymbol"
        ></span>
      </div>
      <label class="center">
        <ons-input
          id="totalCurrentLiabilities"
          float
          maxlength="20"
          type="number"
          placeholder="0.00"
        ></ons-input>
      </label>
      <div class="right">
        <ons-icon
          icon="md-help"
          class="help"
          onclick="showPopover(this, 'Referenced as \'Total Current Liabilities\' in your financial statements')"
        ></ons-icon>
      </div>
    </ons-list-item>

    <ons-list-item class="input-items field tool0 tool1">
      <div class="left">
        Total Liabilities&nbsp;&nbsp;<span class="currencySymbol"></span>
      </div>
      <label class="center">
        <ons-input
          id="totalLiabilities"
          float
          maxlength="20"
          type="number"
          placeholder="0.00"
        ></ons-input>
      </label>
      <div class="right">
        <ons-icon
          icon="md-help"
          class="help"
          onclick="showPopover(this, 'Referenced as \'Total Liabilities\' in your financial statements')"
        ></ons-icon>
      </div>
    </ons-list-item>
  </ons-list>

  <ons-list>
    <ons-list-header class="field tool0 tool1">Funding</ons-list-header>

    <ons-list-item class="input-items field tool0 tool1">
      <div class="left pink">
        Bank Loans - Current&nbsp;&nbsp;<span class="currencySymbol"></span>
      </div>
      <label class="center">
        <ons-input
          id="bankLoansCurrent"
          float
          maxlength="20"
          type="number"
          placeholder="0.00"
        ></ons-input>
      </label>
      <div class="right">
        <ons-icon
          icon="md-help"
          class="help"
          onclick="showPopover(this, 'Referenced as \'Bank Loans and Overdrafts\', or \'Directors Loan\' in your financial statements')"
        ></ons-icon>
      </div>
    </ons-list-item>

    <ons-list-item class="input-items field tool0 tool1">
      <div class="left">
        Bank Loans - Non Current&nbsp;&nbsp;<span class="currencySymbol"></span>
      </div>
      <label class="center">
        <ons-input
          id="bankLoansNonCurrent"
          float
          maxlength="20"
          type="number"
          placeholder="0.00"
        ></ons-input>
      </label>
      <div class="right">
        <ons-icon
          icon="md-help"
          class="help"
          onclick="showPopover(this, 'Referenced as \'Bank Loans and Overdrafts\', or \'Directors Loan\' in your financial statements')"
        ></ons-icon>
      </div>
    </ons-list-item>
  </ons-list>

  <!--TODO: REMOVE BELOW -->
  <ons-list style="display: none">
    <ons-list-header class="field tool1"
      >Sales forecast (for next 12 months)</ons-list-header
    >

    <ons-list-item class="input-items field">
      <div class="left pink">
        Increase Revenue By&nbsp;&nbsp;<span class="currencySymbol"></span>
      </div>
      <label class="center">
        <ons-input
          id="increaseRevenueBy"
          float
          maxlength="20"
          type="number"
          placeholder="0.00"
        ></ons-input>
      </label>
      <div class="right">
        <ons-icon
          icon="md-help"
          class="help"
          onclick="showPopover(this, 'Sales forecast for the next 12 months')"
        ></ons-icon>
      </div>
    </ons-list-item>
  </ons-list>

  <br /><br />

  <div style="width: 50%; float: left">
    <ons-button
      class="bmod push"
      modifier="outline light"
      onclick="cancelEditingFinancials()"
      title="Save Inputs to Storage"
    >
      <ons-icon icon="md-close-circle"></ons-icon> Cancel
    </ons-button>
  </div>
  <div style="width: 50%; float: left; text-align: right">
    <ons-button class="spink" onclick="saveFinancials()">
      <ons-icon icon="md-cloud-upload"></ons-icon> Save Financials
    </ons-button>
  </div>

  <br />
</div>
