{% extends '::baseAjax.html.twig' %}
{% block ajax_body %}

{% set ob_city_dropdown = ob_project_setting['configuration_rule']['site_management']['option']['address']['option']['city']['option']['dropdown']['status'] %}
{% set ob_city_textbox = ob_project_setting['configuration_rule']['site_management']['option']['address']['option']['city']['option']['textbox']['status'] %}
{% set ob_state_dropdown = ob_project_setting['configuration_rule']['site_management']['option']['address']['option']['state']['option']['dropdown']['status'] %}
{% set ob_state_textbox = ob_project_setting['configuration_rule']['site_management']['option']['address']['option']['state']['option']['textbox']['status'] %}
{% set ob_country_dropdown = ob_project_setting['configuration_rule']['site_management']['option']['address']['option']['country']['option']['dropdown']['status'] %}
{% set ob_country_textbox = ob_project_setting['configuration_rule']['site_management']['option']['address']['option']['country']['option']['textbox']['status'] %}

<form action="{{ path('office_brain_userbundle_contactbook_addcontactbookpost')}}" method="post" id="contact_book_add" novalidate>
	<div class="col-lg-12">

	    <span class="required-field">* {{"add_checkout.fill_billing_address"|trans }}</span>
	</div>
	<div class="col-lg-12">
		<div class="checkout-form">
			<input type="hidden" value="0" name="counter">
				<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
					<div class="row">
						{% if ob_country_textbox %}
    						<div class="col-sm-6 col-xs-12">
    							<div class="form-group">
    								<label class="checkout-label" for="countryName">{{ 'add_checkout.user.contact_book.countryId.label'|trans }}</label>
    								{% block order_add_checkout_form_country_name %}
    								{% endblock order_add_checkout_form_country_name %}
    								{% block order_add_checkout_form_country_name_error %}
    								{% endblock order_add_checkout_form_country_name_error %}
    							</div>
    						</div>
                        {% elseif ob_country_dropdown %}
    						<div class="col-sm-6 col-xs-12">
    							<div class="form-group inp-parts">
    								<label class="checkout-label" for="countryId">{{ 'add_checkout.user.contact_book.countryId.label'|trans }}</label>
    								{% block order_add_checkout_form_country_id %}
    								{% endblock order_add_checkout_form_country_id %}
    								{% block order_add_checkout_form_country_id_error %}
    								{% endblock order_add_checkout_form_country_id_error %}
    							</div>  
    						</div>
						{% endif %}

						<div class="col-md-6 col-lg-6 col-sm-6 col-xs-12 ">
							<div class="form-group">
								<label class="checkout-label" for="name">{{ 'First and last name' }}</label>
								{% block order_add_checkout_form_name %}
			                	{% endblock order_add_checkout_form_name %}
			                	{% block order_add_checkout_form_name_error %}
			                	{% endblock order_add_checkout_form_name_error %}								
							</div>
						</div>

						<div class="col-md-6 col-lg-6 col-sm-6 col-xs-12">
							<div class="form-group">
								<label class="checkout-label" for="email">{{ 'add_checkout.user.contact_book.email.label'|trans }}</label>
			                	{{ form_widget(contactBookForm.email,{'attr':{'class':'input','data-toggle':'tooltip','data-placement':'bottom','title':'', 'data-original-title':'add_checkout.user.contact_book.email.label'|trans}} ) }}
			                	{{ form_errors(contactBookForm.email) }}
							</div>
						</div>

						<div class="col-md-6 col-lg-6 col-sm-6 col-xs-12">
							<div class="form-group">
								<label class="checkout-label" for="phone">{{ 'add_checkout.user.contact_book.phone.label'|trans }}</label>
			                	{% block order_add_checkout_form_phone %}
			                	{% endblock order_add_checkout_form_phone %}
			                	{% block order_add_checkout_form_phone_error %}
			                	{% endblock order_add_checkout_form_phone_error %}
							</div>
						</div>

						<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
							<div class="form-group">
								<label class="checkout-label" for="street1">{{ 'Address' }}</label>
								{% block order_add_checkout_form_street_one %}
								{% endblock order_add_checkout_form_street_one %}
								{% block order_add_checkout_form_street_one_error %}
								{% endblock order_add_checkout_form_street_one_error %}
							</div>
						</div>

						{% if ob_city_dropdown %}
						<div class="col-sm-6 col-xs-12">
							<div class="form-group inp-parts">
								{#<label class="checkout-label" for="cityId">{{ 'add_checkout.user.contact_book.cityId.label'|trans }}</label>#}
								{% block order_add_checkout_form_city_id %}
								{% endblock order_add_checkout_form_city_id %}
								{% block order_add_checkout_form_city_id_error %}
								{% endblock order_add_checkout_form_city_id_error %}
							</div>
						</div>
						{% endif %}
						{% if ob_city_textbox %}
						<div class="col-sm-6 col-xs-12">
							<div class="form-group">
								{#<label class="checkout-label" for="cityName">{{ 'add_checkout.user.contact_book.cityId.label'|trans }}<i class="mandatory-field">*</i></label>#}
								{% block order_add_checkout_form_city_name %}
								{% endblock order_add_checkout_form_city_name %}
								{% block order_add_checkout_form_city_name_error %}
								{% endblock order_add_checkout_form_city_name_error %}
							</div>
						</div>
						{% endif %}
						<div class="col-md-6 col-lg-6 col-sm-6 col-xs-12">
							<div class="form-group js-zipcode-validate">
								{#<label class="checkout-label" for="zipcode">{{ 'add_checkout.user.contact_book.zipcode.label'|trans }}<i class="mandatory-field">*</i></label>#}
			                	{% block order_add_checkout_form_zipcode %}
			                	{% endblock order_add_checkout_form_zipcode %}
								{% block order_add_checkout_form_zipcode_error %}
								{% endblock order_add_checkout_form_zipcode_error %}
							</div>
						</div>

						{% if ob_state_textbox %}
    						<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
    							<div class="form-group">
    								{#<label class="checkout-label" for="stateName">{{ 'add_checkout.user.contact_book.stateId.label'|trans }}<i class="mandatory-field">*</i></label>#}
    								{% block order_add_checkout_form_state_name %}
    								{% endblock order_add_checkout_form_state_name %}
    								{% block order_add_checkout_form_state_name_error %}
    								{% endblock order_add_checkout_form_state_name_error %}
    							</div>
    						</div>
                        {% elseif ob_state_dropdown %}
    						<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
    							<div class="form-group inp-parts">
    								{#<label class="checkout-label" for="stateId">{{ 'add_checkout.user.contact_book.stateId.label'|trans }}<i class="mandatory-field">*</i></label>#}
    								{% block order_add_checkout_form_state_id %}
    								{% endblock order_add_checkout_form_state_id %}
    								{% block order_add_checkout_form_state_id_error %}
    								{% endblock order_add_checkout_form_state_id_error %}
    							</div>
    						</div>
						{% endif %}

						<div class="col-sm-6 col-xs-12 hide">
							<div class="form-group inp-parts">
								<label class="checkout-label" for="adressType">{{ 'add_checkout.user.contact_book.addressType.label'|trans }}<span class="mandatory-field">*</span></label>
			                	{% block order_add_checkout_form_address_type %}
			                	{% endblock order_add_checkout_form_address_type %}
								{% block order_add_checkout_form_address_type_error %}
								{% endblock order_add_checkout_form_address_type_error %}
							</div>
						</div>
						<div style="display: none;" class="col-md-12 col-lg-6 col-lg-offset-6 col-sm-12 col-xs-12 js-isoffice">
							<div class="form-group">	
								{% block order_add_checkout_form_is_office %}
								{% endblock order_add_checkout_form_is_office %}
								{% block order_add_checkout_form_is_office_error %}
								{% endblock order_add_checkout_form_is_office_error %}		                	
							</div>									                
						</div>

						<div class="col-md-6 col-lg-6 col-sm-6 col-xs-12 hide">
							<div class="form-group">
								<label class="checkout-label" for="street2">{{ 'add_checkout.user.contact_book.street2.label'|trans }}</label>
								{% block order_add_checkout_form_street_two %}
								{% endblock order_add_checkout_form_street_two %}
								{% block order_add_checkout_form_street_two_error %}
								{% endblock order_add_checkout_form_street_two_error %}
							</div>
						</div>

						<div class="col-md-6 col-lg-6 col-sm-6 col-xs-12 hide">
							<div class="form-group">
			                	<label class="checkout-label" for="mobile">{{ 'add_checkout.user.contact_book.mobile.label'|trans }}</label>
			                	{% block order_add_checkout_form_mobile %}
								{% endblock order_add_checkout_form_mobile %}
								{% block order_add_checkout_form_mobile_error %}
								{% endblock order_add_checkout_form_mobile_error %}
			                </div>
						</div>
						
						<div class="col-md-6 col-lg-6 col-sm-6 col-xs-12 hide">
							<div class="form-group">
								<label class="checkout-label" for="extension">{{ 'add_checkout.user.contact_book.extension.label'|trans }}</label>
								{% block order_add_checkout_form_extension %}
			                		{{ form_widget(contactBookForm.extension,{'attr':{'class':'input','data-toggle':'tooltip','data-placement':'bottom','title':'', 'data-original-title':'add_checkout.user.contact_book.extension.label'|trans}} ) }}
								{% endblock order_add_checkout_form_extension %}
								{% block order_add_checkout_form_extension_error %}
									{{ form_errors(contactBookForm.extension) }}
								{% endblock order_add_checkout_form_extension_error %}
			                </div>
						</div>

						<div class="col-md-6 col-lg-6 col-sm-6 col-xs-12 hide">
							<div class="form-group">
								<label class="checkout-label" for="fax">{{ 'add_checkout.user.contact_book.fax.label'|trans }}</label>
			                	{% block order_add_checkout_form_fax %}
			                	{% endblock order_add_checkout_form_fax %}
								{% block order_add_checkout_form_fax_error %}
								{% endblock order_add_checkout_form_fax_error %}
							</div>
						</div>

						<div class="col-md-6 col-lg-6 col-sm-6 col-xs-12 hide">
							<div class="form-group">
								<label class="checkout-label" for="website">{{ 'add_checkout.user.contact_book.website.label'|trans }} &nbsp;({{ 'add_checkout.user.contact_book.website.example'|trans }})</label>
			                	{% block order_add_checkout_form_website %}
			                	{% endblock order_add_checkout_form_website %}
								{% block order_add_checkout_form_website_error %}
								{% endblock order_add_checkout_form_website_error %}
							</div>
						</div>

					</div>
					
					
					<div class="btn-box-main">
{# 						{% block order_add_checkout_form_btn_submit %}#}
{# 						{% endblock order_add_checkout_form_btn_submit %}#}
						<input type="button" value="{{ 'add_checkout.user.contact_book.submit.label'|trans }}" class="btn btn-default js-checkout-edit-billing-transaction-submit-btn">
						{% block order_add_checkout_form_btn_reset %}
						{% endblock order_add_checkout_form_btn_reset %}
						<input value="Cancel" class="btn btn-default js-cancel-billing-address" type="button">
					</div>
				</div>
		</div>
	</div>
    <div class="hide">{{ form_rest(contactBookForm, {'display': 'hidden'}) }}</div>
</form>    
<script type="text/javascript">
	$("#js-add-new-address-form .custom-select").each(function () {
	    $(this).wrap("<span class='checkout-select-wrapper select-block'></span>");
	    $(this).after("<span class='checkout-holder'></span>");
	    var selectedOption = $(this).find(":selected").text();
		$(this).parents(".checkout-select-wrapper").find(".checkout-holder").text(selectedOption);
	});
	
	$(document).on('change','#js-add-new-address-form  .custom-select', function() {
		var selectedOption = $(this).find(":selected").text();
	    $(this).parents(".checkout-select-wrapper").find(".checkout-holder").text(selectedOption);
	});
	
	//$('#js-add-new-address-form .custom-select').trigger('change');
	$(document).on('click','.custom-select option', function() {
	    $(this).parents(".checkout-select-wrapper").find(".checkout-holder").html('<span>'+ this.innerHTML+ '</span>');
	});
	
    $(".js-city").chosen();
    var city = "{{ 'user.contact_book.cityId.label'|trans }}";
	var pr = $(".js-city").parent();
	$(".chosen-container", pr).tooltip({
	    placement: "bottom"
	}).attr('data-original-title', city);

	$('.reset_all_fields').click(function(){
		
		var frm = $(this).closest('form');
		
		var option_childs = $(frm).find('.js-state option');
		for(var i=1; i<option_childs.length; i++){
			$(option_childs[i]).remove();
		}
		
		var option_childs = $(frm).find('.js-city option');
		for(var i=1; i<option_childs.length; i++){
			$(option_childs[i]).remove();
		}
		$(".js-city").trigger("chosen:updated");
		$(".js-city").chosen();
		// Position field now displays the appropriate positions.
		//$('.js-city').find("option").first().click();
	});
	
</script>
{# {% block order_add_checkout_form_jquery %}#}
{# {% endblock order_add_checkout_form_jquery %}#}
<!-- END Request Quick View Block -->
{% endblock ajax_body %}