{% extends "::base.html.twig" %}  
{% block image %}{% endblock %}
{% block clientname %}{% endblock %}   
{% block body %}

<div id="user_edit" style="zoom: 90%;padding-left:40px;" >

<div id="override_javascript_alert"></div>

    <form id="clientform" action="{{ path('DorcasTabithaBundle_print_promissoryShow', { 'client_id' : client.clientid } ) }}" method="post" {{ form_enctype(form) }} class="dorcas" style=" font-size:14px;">


		<body style="padding: 60px; padding-top:20px; background-color: #cdf1f1; "> 


			<center><img src="{{ asset('bundles/dorcastabitha/images/dorcasLogoVertical.png') }}" alt="Dorcas">
			<h4>
			187 High House Road<br />
			Cary, NC 27511<br />
			</h4>

			<h1>Promissory Note</h1></center>
			

			<p style="line-height:180%; padding-left: 20px;">

				<strong>Date:</strong> {{ "now"|date("m/d/Y") }}
				<span style="padding-left:250px;"><strong>Counselor:</strong> {{ promissory.counselor }}</span>
				<br />
				<strong>Client Name:</strong> {{ client.FullName }} 
				<br />
				<strong>Client Address:</strong> {{ client.fulladdress }}
				<br />
					
				<div style="border:1px solid;background-color:#cdf1f1; padding:20px; height:120px;">
				
						<strong>{{ form_label(form.expiration_date) }}</strong>
							{{ form_widget(form.expiration_date, { 'attr': {'size': '11', 'class': 'datepicker'} }) }} 
							<br />
						
						<div style="float: left; line-height: 150%;">
							<span class = "underline"><strong>{{ form_label(form.balance_client) }}</strong></span>
							<br />
							<strong>Assistance Offered by Dorcas: </strong> 
							<br />
							<strong>Amount Offered by Other Agency: </strong>
							<br />
							<strong>Amount Offered by Other Agency: </strong>
							<br />
						</div>
						<div style="float: left;line-height: 150%;padding-left: 20px;">
							
							<br />
							<br />
							{{ form_widget(form.other_desc, { 'attr': {'size': '15', 'tabindex':'2'} }) }}
							<br />
							{{ form_widget(form.other_desc2, { 'attr': {'size': '15','tabindex':'4'} }) }}
						</div>
						<div style="float: right; line-height:150%;">
							
							{{ form_widget(form.balance_client, { 'attr': {'size': '15', 'tabindex':'1', 'onchange': 'isNumber(this)' } }) }} 
							<br />
							{{ form_widget(form.pledge_dorcas, { 'attr': {'size': '15','tabindex':'1' , 'onchange': 'isNumber(this)' } }) }}
							<br />
							{{ form_widget(form.pledge_other, { 'attr': {'size': '15','tabindex':'3' , 'onchange': 'isNumber(this)'} }) }}
							<br />
							 {{ form_widget(form.pledge_other2, { 'attr': {'size': '15','tabindex':'5', 'onchange': 'isNumber(this)' } }) }}
						</div>
					</div>				
				
				
				<div style="padding: 20px; line-height: 180%; height:120px; ">
					<div style=" float: left; padding-right: 10px;">
						<strong>Type of Assistance (Rent, Water, Oasis, Gas, etc.):</strong> 
					</div>
					<div style="padding-left:20px; float: right;">
						
						 {{ form_widget(form.check_purpose, { 'attr': {'style': 'width: 160px;', 'tabindex':'7'} }) }}
					</div>
					
					<div style="float: left;">	
						<div style="float: left;">
							<strong>{{ form_label(form.account_number) }}</strong>
						</div>
					
						<div style="padding-left: 10px; float: left;">
							{{ form_widget(form.account_number, { 'attr': {'size': '15', 'tabindex':'8' } }) }} 
						</div>
					
					
						<div style="padding-left: 38px; padding-right: 10px; float: left;">
							 <strong>Name on Bill: </strong>
						</div>
						<div style="padding-left: 8px; float: right;">
							 {{ form_widget(form.name_on_bill, { 'attr': {'size': '24', 'tabindex':'9' } }) }}
						</div>
					</div>
					<br />
					<div style="float: left; ">
						<strong>Vendor Name:</strong>
						<br />
						<strong>{{ form_label(form.vendor_address) }}</strong>
					</div>
					<div style="float:right;">
						{{ form_widget(form.vendor_name, { 'attr': {'size': '50', 'tabindex':'10' } }) }}
						<br />
						{{ form_widget(form.vendor_address, { 'attr': {'size': '50', 'tabindex':'11'} }) }} 
					</div>
				</div>		
					
					
				{{ form_rest(form) }}
				
			</p>    
		   
		   
			<div style="border:2px solid; padding: 14px;  font-size:12px;">
				<strong>ATTENTION: This is NOT a pledge.</strong>  The client must pay the remaining balance 
				by the <em>expiration date above</em> or this note will expire without further notice.
				<br />
				<strong>LANDLORD or BUSINESS</strong> <em>must call</em> the Crisis Ministry Office by the expiration date to 
				confirm that the above balance has been paid.
				<br />
				<strong>FOR PROGRESS ENERGY AND OTHER UTILITIES:</strong> The CLIENT <em>must call</em> Dorcas Ministries with their 
				receipt number after making a payment.  For Progress Energy, pay: on-line, by phone, or in 
				person at an authorized payment center, such as the High House Food Mart (corner of Old Apex/High House Roads).
				<br /><center>CALL: 919-459-9861, ext 201</center>
				<br />
				<strong>NO CHECK WILL BE RELEASED WITHOUT CONFORMATION that the client paid their balance.</strong>
				Dorcas must also have verification that another agency has offered assistance.
				
				<div style="position:absolute; top:10px; left:10px;">
                                                <input type="button" value="Create Printable Promissory Note" onclick="save(false)" >
				</div>
			</div>
			<br />
		</body>
	</form>
</div>

{% endblock %}

{% block logout %}{% endblock %}

{% block javascripts %}

{{ parent() }}

<script type="text/javascript">

function isNumber(field)
{
     if( isNaN(field.value)){
        alert("&#8227 Please enter whole number only, no <br />&nbsp;  dollar sign.");
        field.value = 0;
        field.focus();
         }
}

$(function() {
//    $( ".datepicker" ).datepicker({ showAnim: "slideDown" });
    $( ".datepicker" ).datepicker({ changeMonth: true, changeYear: true, yearRange:"-0:+10"
        });
        });


window.alert = function(message) {
	$('#override_javascript_alert').html(message).dialog({
		modal:true,
		title:'Tabitha Validation Message',
		buttons: {
			'OK':function(){
				$(this).dialog('close');
			}
		}
	});
};


/**--------------------------
//* Validate Date Field script- By JavaScriptKit.com
//* For this script and 100s more, visit http://www.javascriptkit.com
//* This notice must stay intact for usage
---------------------------**/

function checkdate(input){
    var validformat=/^\d{2}\/\d{2}\/\d{4}$/ //Basic check for format validity
    var returnval=false
    if (!validformat.test(input))
    {
//        alert("Invalid Date Format. Please correct and submit again.")
    }
    else{ //Detailed check for valid date ranges
        var monthfield=input.split("/")[0]
        var dayfield=input.split("/")[1]
        var yearfield=input.split("/")[2]
        var dayobj = new Date(yearfield, monthfield-1, dayfield)
        if ((dayobj.getMonth()+1!=monthfield)||(dayobj.getDate()!=dayfield)||(dayobj.getFullYear()!=yearfield))
        {
//            alert("Invalid Day, Month, or Year range detected. Please correct and submit again.")
        }
        else
            returnval=true
    }
//    if (returnval==false) input.select()
    return returnval
}

function save(nav)
{ 
    // Read all values

    var eDate = document.getElementById('promissoryform_expiration_date').value;

    okaytosubmit = true;
    alertMessage = "";

    // Check Date for valid date
    if (eDate && !checkdate(eDate))
    {
        alertMessage = alertMessage + '&#8227 Please enter a valid Expiration Date. <br/>';
        okaytosubmit = false;
    }

    if (okaytosubmit == true)
    {
        var form = document.forms["clientform"];
        form.submit();
    }
    else
    {
        alert(alertMessage);
    }
}

</script>
   
{% endblock %}

{% block stylesheets %}

{{ parent() }}

<style >
input
    {
        font-size:14px;
    }
</style>
{% endblock %}


 
