@extends('layouts.app')
@section('title', 'BWSI')

@section('body')
<div class="box box-default">
	<div class="box-body" style="padding-top:4px">
		<form method="post" autocomplete="false" id="form-new-application">
			<div class="row">
			    <div class="col-xs-12">
			        <div class="pull-right box-tools" style="margin-top:3px; padding-right:3px">
			            <button id="save-application" type="button" class="btn btn-default">
			            	<i class="fa fa-fw fa-save text-success"></i>&nbsp;Save Customer's Service Application
			            </button>
			        </div>  

			        <div class="pull-right box-tools" style="margin-top:3px; padding-right:3px">
			        	<a href="{{url('csr/application')}}" class="btn btn-default">
			        		<i class="fa fa-fw fa-ban text-danger"></i> Cancel
			        	</a>
			        </div>   

			        <h5 class="page-header">
			            New Service Application
			        </h5>               
			    </div>
			</div>

			<div class="row">
		        <div class="col-xs-6">
		        	<div class="row">
		            	<div class="col-xs-4 form-group">
					      	<span class="text-bold">CUSTOMER CATEGORY</span>
					      	<select id="customer_category" name="customer_category" class="form-control select2 select2-hidden-accessible" data-placeholder="SELECT ONE" style="width: 100%;" aria-hidden="true">
		                  		<option></option>
		                  		<option value="person">PERSON</option>
		                  		<option value="establishment">ESTABLISHMENT</option>
		                	</select>
					    </div>
						<div class="col-xs-4 form-group">
							<span class="text-bold">ACCOUNT CLASS</span>
							<select id="acct_class" name="acct_class" class="form-control select2 select2-hidden-accessible" data-placeholder="SELECT ONE" style="width: 100%;" aria-hidden="true">
		                  		<option></option>
		                  		<option value="res" data-class="res">RESIDENTIAL</option>
		                  		<option value="com" data-class="com">COMMERCIAL</option>
		                  		<option value="ind" data-class="ind">INDUSTRIAL</option>
		                  		<option value="gov" data-class="gov">GOVERNMENT</option>
		                  		<option value="rel" data-class="rel">RELIGIOUS</option>
                        		<option value="blk" data-class="blk">BULK WATER</option>
		                	</select>
						</div>
						<div class="col-xs-4 form-group">
							<span class="text-bold">SUB CLASSIFICATION</span>
							<select id="acct_subclass" name="acct_subclass" class="form-control select2 select2-hidden-accessible" data-placeholder="SELECT ONE" style="width: 100%;" aria-hidden="true">
		                  		<option></option>
		                	</select>
						</div>
					</div>
					<div class="row" id="customer-info-cont">
						<!-- APPEND AREA -->
					</div>
		        </div>

		        <div class="col-xs-6">
		        	<div class="row">
		            	<div class="col-xs-12 form-group">		         
		            		<span class="text-bold">A REPRESENTATIVE IS APPLYING IN BEHALF OF THE CUSTOMER</span>
		              		<div class="input-group">
		                        <span class="input-group-addon">				
		                        	<input type="checkbox" id="with_representative" name="with_representative" title="If customer applying is a senior citizen.">
		                        </span>
		                        <input type="text" name="representative_name" id="representative_name" class="form-control" placeholder="REPRESENTATIVE NAME" disabled="true">
		                    </div>
		            	</div>
		        	</div>
		        	<div class="row">
		        		<div class="col-xs-4">
							<div class="form-group">
						  		<span class="text-bold">LANDLINE NO.</span>
						      	<input name="landline_number" type="text" id="landline_number" class="form-control" data-inputmask="mask": "(999) 999-9999"" data-mask>
							</div>
						</div>

						<div class="col-xs-4">
							<div class="form-group">
						  		<span class="text-bold">MOBILE NO.</span>
						      	<input name="mobile_number" type="text" id="mobile_number" class="form-control">
						  	</div>
						</div>

						<div class="col-xs-4">
							<div class="form-group">
					      		<span class="text-bold">EMAIL ADDRESS</span>
					      		<input name="email_address" id="email_address" class="form-control" type="email">
					  		</div>
					  	</div>

					  	<!-- This field is only available on parrallel test.  -->
		        		@if(session('system_mode') == 'parallel') 
						<div class="col-xs-4">
							<div class="form-group">
			            		<span class="text-bold" for="date_applied">DATE APPLIED*</span>
			              		<input name="date_applied" id="date_applied" value="{{ \Carbon\Carbon::now()->format('Y-m-d') }}" type="text" class="form-control date-masked">
			            	</div>
		            	</div>
		            	@endif
		        	</div>
		        </div>

		        <div class="col-xs-12">
		        	<small class="text-danger"><i class="fa fa-fw fa-info-circle"></i> YOU CAN ADD MULTIPLE ADDRESS(ES) IF THE CUSTOMER IS APPLYING FOR MULTIPLE SERVICE CONNECTIONS UNDER HIS/HER NAME.</small>
			        <table class="table table-bordered table-condensed" id="table-accounts">
						<thead class="table-header-bg">
							<tr>
								<th width="17%">PROVINCE</th>
								<th width="17%">CITY</th>
								<th width="17%">BARANGAY</th>
								<th width="32%">HOUSE NO, STREET, VILLAGE</th>
								<th width="14%">DOWNPAYMENT <a href="#" title="For branches that requires reservation, upfront or downpayment please type in the amount of downpayment else leave it blank."><i class="fa fa-question-circle text-primary"></i></a></th>
								<th width="03%">&nbsp;</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td style="padding:2px">
									<select name="province_id[]" class="form-control select2 select2-hidden-accessible new-account-province" data-placeholder="" style="width: 100%;" aria-hidden="true">
							      		<option value="{{ session('branch_province_id') }}">{{ session('branch_province_desc') }}</option>
							    	</select>
								</td>
								<td style="padding:2px">
									<select name="city_id[]" class="form-control select2 select2-hidden-accessible new-account-city" data-placeholder="" style="width: 100%;" aria-hidden="true">
							      		<option value="{{ session('branch_city_id') }}">{{ session('branch_city_desc') }}</option>
							    	</select>
								</td>
								<td style="padding:2px">
									<select name="brgy_id[]" class="form-control select2 select2-hidden-accessible new-account-brgy" data-placeholder="" style="width: 100%;" aria-hidden="true">
							      		<option></option>
							    	</select>
								</td>
								<td style="padding:2px">
									<input name="address[]" class="form-control new-account-address" type="text">
								</td>
								<td style="padding:2px">
									<input name="downpayment[]" class="form-control curr new-account-downpayment" type="text">
								</td>
								<td style="padding:2px">
									<a class="btn btn-success new-account-row"><i class="fa fa-plus"></i></a>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</form>
	</div>
</div>
@endsection

@section('scripts')
<script src="{{ url(mix('js/csr-application-new.js')) }}"></script>
@endsection