<div id="navbar" style="font-size:18px;">   
    <ul>   
        <li><a href="javascript: submitform(9)">Home</a></li>
        <li><a href="javascript: submitform(1)">Client Information</a></li> 
        <li><a href="javascript: submitform(2)" style="background-color:#00b5cb; font-size:30px;">Finance</a></li>
        <li><a href="javascript: submitform(3)">Notes</a></li>
        <li><a href="javascript: submitform(4)">Assistance</a></li>
        <li><a href="javascript: submitform(5)">Referrals</a></li> 
    </ul> 
</div>
 
<br>&nbsp;
<input type="submit" value="Save/Next" style="color:#00b5cb; background-color:white;">
<input type="button" value="Cancel Changes" onClick="window.location.reload()" style="color:#00b5cb; background-color:white;">
<br>&nbsp;<br>

{{ form_errors(form) }}

    <hr size="1" color="black" noshade/>      
    <h3>
    Gross Monthly Household Income
    </h3>
    <hr size="1" color="black" noshade/>


    <div id="topLeft" style="width: 25%; float: left; padding-left:2%; ">
        <div class="financelabel">
            {{ form_label(form.takeHome_pay) }}
        </div>
        <div class="financelabel">
            {{ form_label(form.spouseOther_pay) }}
        </div>
        <div class="financelabel">
            {{ form_label(form.unemployment_compensation) }}
        </div>
        <div class="financelabel">
            {{ form_label(form.workers_compensation) }}
        </div>
        <div class="financelabel">
            {{ form_label(form.childSupport_alimony) }}
        </div>
    </div>


    <div id="topLeftCenter" style="width: 15%; float: left; padding-right:9%">
        <div class="financeinput" id="takeHome_pay">
            {{ form_errors(form.takeHome_pay) }}
            {{ form_widget(form.takeHome_pay, { 'attr': {'size': '10', 'onchange': 'calculate(this)', 'class': 'input_text_align'} }) }}
        </div>
        <div class="financeinput" id="spouseOther_pay">
            {{ form_errors(form.spouseOther_pay) }}
            {{ form_widget(form.spouseOther_pay, { 'attr': {'size': '10','onchange': 'calculate(this)', 'class': 'input_text_align'} }) }}
        </div>
        <div class="financeinput" id="unemployment_compensation">
            {{ form_errors(form.unemployment_compensation) }}
            {{ form_widget(form.unemployment_compensation, { 'attr': {'size': '10','onchange': 'calculate(this)', 'class': 'input_text_align'} }) }}
        </div>
        <div class="financeinput" id="workers_compensation">
            {{ form_errors(form.workers_compensation) }}
            {{ form_widget(form.workers_compensation, { 'attr': {'size': '10','onchange': 'calculate(this)', 'class': 'input_text_align'} }) }}
        </div>
        <div class="financeinput" id="childSupport_alimony">
            {{ form_errors(form.childSupport_alimony) }}
            {{ form_widget(form.childSupport_alimony, { 'attr': {'size': '10','onchange': 'calculate(this)', 'class': 'input_text_align'} }) }}
        </div>
    </div>


    <div id="topRightCenter" style="width: 25%; float: left; padding-left:9%">

        <div class="financelabel">
            {{ form_label(form.socialSecurity_income) }}
        </div>
        <div class="financelabel">
            {{ form_label(form.ssi_disability) }}
        </div>
        <div class="financelabel">
            {{ form_label(form.work_first) }}
        </div>
        <div class="financelabel">
            {{ form_label(form.food_stamps) }}
        </div>
        <div class="financelabel">
            {{ form_label(form.other_income) }}
        </div>

    </div>


    <div id="topRight" style="width: 15%; float: left;">

        <div class="financeinput" id="socialSecurity_income">
            {{ form_errors(form.socialSecurity_income) }}
            {{ form_widget(form.socialSecurity_income, { 'attr': {'size': '10','onchange': 'calculate(this)', 'class': 'input_text_align'} }) }}
        </div>
        <div class="financeinput" id="ssi_disability">
            {{ form_errors(form.ssi_disability) }}
            {{ form_widget(form.ssi_disability, { 'attr': {'size': '10','onchange': 'calculate(this)', 'class': 'input_text_align'} }) }}
        </div>
        <div class="financeinput" id="work_first">
            {{ form_errors(form.work_first) }}
            {{ form_widget(form.work_first, { 'attr': {'size': '10','onchange': 'calculate(this)', 'class': 'input_text_align'} }) }}
        </div>
        <div class="financeinput" id="food_stamps">
            {{ form_errors(form.food_stamps) }}
            {{ form_widget(form.food_stamps, { 'attr': {'size': '10','onchange': 'calculate(this)', 'class': 'input_text_align'} }) }}
        </div>
        <div class="financeinput" id="other_income">
            {{ form_errors(form.other_income) }}
            {{ form_widget(form.other_income, { 'attr': {'size': '10','onchange': 'calculate(this)', 'class': 'input_text_align'} }) }}
        </div>

    </div>
    
<br>&nbsp;<br>
        <hr size="1" color="black" noshade/>      
        <h3>
        Monthly Expenses
        </h3>
        <hr size="1" color="black" noshade/>

    <div id="bottomLeft" style="width: 25%; float: left; padding-left:2%;">
            <div class="financelabel">
                {{ form_label(form.rent) }}
            </div>
            <div class="financelabel">
                {{ form_label(form.water) }}
            </div>
            <div class="financelabel">
                {{ form_label(form.childcare) }}
            </div>
            <div class="financelabel">
                {{ form_label(form.child_support) }}
            </div>
            <div class="financelabel">
                {{ form_label(form.electric) }}
            </div>
            <div class="financelabel">
                {{ form_label(form.natural_gas) }}
            </div>
            <div class="financelabel">
                {{ form_label(form.cable_tv) }}
            </div>
            <div class="financelabel">
                {{ form_label(form.telephone) }}
            </div>
            <div class="financelabel">
                {{ form_label(form.cell_phone) }}
            </div>
            <div class="financelabel">
                {{ form_label(form.education) }}
            </div>
            <div class="financelabel">
                {{ form_label(form.clothing) }}
            </div>
            <div class="financelabel">
                {{ form_label(form.laundry) }}
            </div>
            <div class="financelabel">
                {{ form_label(form.pets) }}
            </div>
            <div class="financelabel">
                {{ form_label(form.gifts) }}
            </div>
    </div>


    <div id="bottomLeftCenter" style="width: 15%; float: left; padding-right:9%">
        <div id="rent" class="financeinput">
            {{ form_errors(form.rent) }}
            {{ form_widget(form.rent, { 'attr': {'size': '10','onchange': 'calculate(this)', 'class': 'input_text_align'} }) }}
        </div>
        <div id="water" class="financeinput">
            {{ form_errors(form.water) }}
            {{ form_widget(form.water, { 'attr': {'size': '10','onchange': 'calculate(this)', 'class': 'input_text_align'} }) }}
        </div>
        <div id="childcare" class="financeinput">
            {{ form_errors(form.childcare) }}
            {{ form_widget(form.childcare, { 'attr': {'size': '10','onchange': 'calculate(this)', 'class': 'input_text_align'} }) }}
        </div>
        <div id="child_support" class="financeinput">
            {{ form_errors(form.child_support) }}
            {{ form_widget(form.child_support, { 'attr': {'size': '10','onchange': 'calculate(this)', 'class': 'input_text_align'} }) }}
        </div>
        <div id="electric" class="financeinput">
            {{ form_errors(form.electric) }}
            {{ form_widget(form.electric, { 'attr': {'size': '10','onchange': 'calculate(this)', 'class': 'input_text_align'} }) }}
        </div>
        <div id="natural_gas" class="financeinput">
            {{ form_errors(form.natural_gas) }}
            {{ form_widget(form.natural_gas, { 'attr': {'size': '10','onchange': 'calculate(this)', 'class': 'input_text_align'} }) }}
        </div>
        <div id="cable_tv" class="financeinput">
            {{ form_errors(form.cable_tv) }}
            {{ form_widget(form.cable_tv, { 'attr': {'size': '10','onchange': 'calculate(this)', 'class': 'input_text_align'} }) }}
        </div>
        <div id="telephone" class="financeinput">
            {{ form_errors(form.telephone) }}
            {{ form_widget(form.telephone, { 'attr': {'size': '10','onchange': 'calculate(this)', 'class': 'input_text_align'} }) }}
        </div>
        <div id="cell_phone1" class="financeinput">
            {{ form_errors(form.cell_phone) }}
            {{ form_widget(form.cell_phone, { 'attr': {'size': '10','onchange': 'calculate(this)', 'class': 'input_text_align'} }) }}
        </div>
        <div id="education" class="financeinput">
            {{ form_errors(form.education) }}
            {{ form_widget(form.education, { 'attr': {'size': '10','onchange': 'calculate(this)', 'class': 'input_text_align'} }) }}
        </div>
        <div id="clothing" class="financeinput">
            {{ form_errors(form.clothing) }}
            {{ form_widget(form.clothing, { 'attr': {'size': '10','onchange': 'calculate(this)', 'class': 'input_text_align'} }) }}
        </div>
        <div id="laundry" class="financeinput">
            {{ form_errors(form.laundry) }}
            {{ form_widget(form.laundry, { 'attr': {'size': '10','onchange': 'calculate(this)', 'class': 'input_text_align'} }) }}
        </div>
        <div id="pets" class="financeinput">
            {{ form_errors(form.pets) }}
            {{ form_widget(form.pets, { 'attr': {'size': '10','onchange': 'calculate(this)', 'class': 'input_text_align'} }) }}
        </div>
        <div id="gifts" class="financeinput">
            {{ form_errors(form.gifts) }}
            {{ form_widget(form.gifts, { 'attr': {'size': '10','onchange': 'calculate(this)', 'class': 'input_text_align'} }) }}
        </div>
    </div>



    <div id="bottomRightCenter" style="width: 25%; float: left; padding-left:9%;">
            <div class="financelabel">
                {{ form_label(form.food) }}
            </div>
            <div class="financelabel">
                {{ form_label(form.medical_insurance) }}
            </div>              
            <div class="financelabel">
                {{ form_label(form.otherMedical_expense) }}
            </div>            
            <div class="financelabel">
                {{ form_label(form.car_payment_one) }}
            </div>
            <div class="financelabel">
                {{ form_label(form.car_payment_two) }}
            </div>
            <div class="financelabel">
                {{ form_label(form.car_insurance) }}
            </div>
            <div class="financelabel">
                {{ form_label(form.gasoline) }}
            </div>
            <div class="financelabel">
                {{ form_label(form.otherTransportation_expense) }}
            </div>
            <div class="financelabel">
                {{ form_label(form.creditCard_payment) }}
            </div>
            <div class="financelabel">
                {{ form_label(form.other_loans) }}
            </div>
            <div class="financelabel">
                {{ form_label(form.savings) }}
            </div>
            <div class="financelabel" style="position:relative; top:-4px;">
                {{ form_widget(form.other_one_label) }}
            </div>
            <div class="financelabel" style="position:relative; top:-10px;">
                {{ form_widget(form.other_two_label) }}
            </div>
    </div>

    <div id="bottomRight" style="width: 15%; float: left;">
        <div id="food" class="financeinput">
            {{ form_errors(form.food) }}
            {{ form_widget(form.food, { 'attr': {'size': '10','onchange': 'calculate(this)', 'class': 'input_text_align'} }) }}
        </div>
        <div id="medical_insurance" class="financeinput">
            {{ form_errors(form.medical_insurance) }}
            {{ form_widget(form.medical_insurance, { 'attr': {'size': '10','onchange': 'calculate(this)', 'class': 'input_text_align'} }) }}
        </div>
        <div id="otherMedical_expense" class="financeinput">
            {{ form_errors(form.otherMedical_expense) }}
            {{ form_widget(form.otherMedical_expense, { 'attr': {'size': '10','onchange': 'calculate(this)', 'class': 'input_text_align'} }) }}
        </div>
        <div id="car_payment_one" class="financeinput">
            {{ form_errors(form.car_payment_one) }}
            {{ form_widget(form.car_payment_one, { 'attr': {'size': '10','onchange': 'calculate(this)', 'class': 'input_text_align'} }) }}
        </div>
        <div id="car_payment_two" class="financeinput">
            {{ form_errors(form.car_payment_two) }}
            {{ form_widget(form.car_payment_two, { 'attr': {'size': '10','onchange': 'calculate(this)', 'class': 'input_text_align'} }) }}
        </div>
        <div id="car_insurance" class="financeinput">
            {{ form_errors(form.car_insurance) }}
            {{ form_widget(form.car_insurance, { 'attr': {'size': '10','onchange': 'calculate(this)', 'class': 'input_text_align'} }) }}
        </div>
        <div id="gasoline" class="financeinput">
            {{ form_errors(form.gasoline) }}
            {{ form_widget(form.gasoline, { 'attr': {'size': '10','onchange': 'calculate(this)', 'class': 'input_text_align'} }) }}
        </div>
        <div id="otherTransportation_expense" class="financeinput">
            {{ form_errors(form.otherTransportation_expense) }}
            {{ form_widget(form.otherTransportation_expense, { 'attr': {'size': '10','onchange': 'calculate(this)', 'class': 'input_text_align'} }) }}
        </div>
        <div id="creditCard_payment" class="financeinput">
            {{ form_errors(form.creditCard_payment) }}
            {{ form_widget(form.creditCard_payment, { 'attr': {'size': '10','onchange': 'calculate(this)', 'class': 'input_text_align'} }) }}
        </div>
        <div id="other_loans" class="financeinput">
            {{ form_errors(form.other_loans) }}
            {{ form_widget(form.other_loans, { 'attr': {'size': '10','onchange': 'calculate(this)', 'class': 'input_text_align'} }) }}
        </div>
        <div id="savings" class="financeinput">
            {{ form_errors(form.savings) }}
            {{ form_widget(form.savings, { 'attr': {'size': '10','onchange': 'calculate(this)', 'class': 'input_text_align'} }) }}
        </div>
        <div id="other_one" class="financeinput">
            {{ form_errors(form.other_one) }}
            {{ form_widget(form.other_one, { 'attr': {'size': '10','onchange': 'calculate(this)', 'class': 'input_text_align'} }) }}
        </div>
        <div id="other_two" class="financeinput">
            {{ form_errors(form.other_two) }}
            {{ form_widget(form.other_two, { 'attr': {'size': '10','onchange': 'calculate(this)', 'class': 'input_text_align'} }) }}
        </div>



    </div>

<br>&nbsp;<br>
<hr size="1" color="black" noshade/>
<hr size="1" color="black" noshade/>

<div id="totalincome" style="width:32%; float:left;padding-left:2%;">
        <label >TOTAL INCOME: $</label>
        <input name="form_totalIncome" id="form_totalIncome" type="text" size="12" readonly="true" class="input_text_align"/>
</div>
<div id="totalexpense" style="width:32%; float:left;">
        <label >TOTAL EXPENSES: $</label>
        <input name="form_totalExpenses" id="form_totalExpenses" type="text" size="12" readonly="true" class="input_text_align"/>
</div>
<div id="surplusdeficit" style="width:33%; float:left;">
        <label >SURPLUS/DEFICIT: $</label>
        <input name="form_deficit" id="form_deficit" type="text" size="12" readonly="true" class="input_text_align"/>
        
</div>

        {{ form_rest(form) }}
            
<br />
<br />




