<?= $this->extend('layouts/default') ?>

<?= $this->section('content') ?>

	<div class="row">
		<div class="col-md-12">

			<div class="portlet light">
				<div class="portlet-title">
					<div class="caption">
						Form Add Billing
					</div>
					<div class="tools">
						<a href="javascript:;" class="collapse"></a>
						<a href="javascript:;" class="fullscreen">
						</a>
					</div>
				</div>
				<div class="portlet-body form">
					
					<form class="form-horizontal" method="post" action="<?= $action ?>">

						<input type="hidden" name="key" value="qwerty"/>

						<div class="form-body">
							<div class="row">
								<div class="col-md-6">
									<div class="form-group">
										<label class="col-md-4 control-label">Occupant</label>
										<div class="col-md-8">
											<div class="input-group">
												<input type="text" class="form-control" name="occupant_name" readonly>
												<input type="hidden" name="occupant_id" value="">
												<span class="input-group-btn">
													<button class="btn blue" type="button"><i class="fa fa-search"></i></button>
												</span>
											</div>
										</div>
									</div>
								</div>
								<div class="col-md-6">
								</div>
							</div>
							<div class="row">
								<div class="col-md-6">
									<div class="form-group">
										<label class="col-md-4 control-label">Invoice Date</label>
										<div class="col-md-8">
											<div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
												<input type="text" class="form-control" name="bill_date" readonly>
												<span class="input-group-btn">
													<button class="btn default" type="button"><i class="fa fa-calendar"></i></button>
												</span>
											</div>
										</div>
									</div>
								</div>
								<div class="col-md-6">
									<div class="form-group">
										<label class="col-md-4 control-label">Due Date</label>
										<div class="col-md-8">
											<div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
												<input type="text" class="form-control" name="bill_due_date" readonly>
												<span class="input-group-btn">
													<button class="btn default" type="button"><i class="fa fa-calendar"></i></button>
												</span>
											</div>
										</div>
									</div>
								</div>
							</div>

							<!-- BEGIN TAB -->
							<ul class="nav nav-tabs">
								<li class="active">
									<a href="#tab_electricity" data-toggle="tab">
										Electricity 
									</a>
								</li>
								<li>
									<a href="#tab_water" data-toggle="tab">
										Water 
									</a>
								</li>
								<li>
									<a href="#tab_other" data-toggle="tab">
										Service Charge, IKKL, etc 
									</a>
								</li>
								<li>
									<a href="#tab_total" data-toggle="tab">
										Grand Total 
									</a>
								</li>
							</ul>
							<div class="tab-content">

								<!-- BEGIN TAB ELECTRICITY -->
								<div class="tab-pane fade active in" id="tab_electricity">

									<div class="row">
										<div class="col-md-4">
											<div class="form-group">
												<label class="col-md-5 control-label">Start Meter</label>
												<div class="col-md-7">
													<input type="text" class="form-control" name="electric_usage_start" value="">
												</div>
											</div>
											<div class="form-group">
												<label class="col-md-5 control-label">End Meter</label>
												<div class="col-md-7">
													<input type="text" class="form-control" name="electric_usage_end" value="">
												</div>
											</div>
											<div class="form-group">
												<label class="col-md-5 control-label">Total Usage</label>
												<div class="col-md-7">
													<input type="text" class="form-control" name="electric_usage_amount" value="" readonly>
												</div>
											</div>
											<div class="form-group">
												<label class="col-md-5 control-label">Rate</label>
												<div class="col-md-7">
													<input type="text" class="form-control" name="electric_meter_rate" value="" readonly>
												</div>
											</div>
										</div>
										<div class="col-md-4">
											<div class="form-group">
												<label class="col-md-5 control-label">Power Installed</label>
												<div class="col-md-7">
													<input type="text" class="form-control" name="electric_meter_power" value="" readonly>
												</div>
											</div>
											<div class="form-group">
												<label class="col-md-5 control-label">Service Fee</label>
												<div class="col-md-7">
													<input type="text" class="form-control" name="electric_meter_service" value="" readonly>
												</div>
											</div>
										</div>
										<div class="col-md-4">
											<div class="form-group">
												<label class="col-md-5 control-label">PJU Fee 7%</label>
												<div class="col-md-7">
													<input type="text" class="form-control" name="bill_electric_pju" value="" readonly>
												</div>
											</div>
											<div class="form-group">
												<label class="col-md-5 control-label">Admin Fee 5%</label>
												<div class="col-md-7">
													<input type="text" class="form-control" name="bill_electric_admin" value="" readonly>
												</div>
											</div>
											<div class="form-group">
												<label class="col-md-5 control-label">PPN 10%</label>
												<div class="col-md-7">
													<input type="text" class="form-control" name="bill_electric_ppn" value="" readonly>
												</div>
											</div>
										</div>
									</div>

									<div class="divider"></div>

									<div class="row mt-10">
										<div class="col-md-4">
											<div class="form-group">
												<label class="col-md-5 control-label">Subtotal</label>
												<div class="col-md-7">
													<input type="text" class="form-control" name="bill_electric_amount" value="" readonly>
												</div>
											</div>
										</div>
										<div class="col-md-4">
											<div class="form-group">
												<label class="col-md-5 control-label">Subtotal</label>
												<div class="col-md-7">
													<input type="text" class="form-control" name="bill_electric_service" value="" readonly>
												</div>
											</div>
										</div>
										<div class="col-md-4">
											<div class="form-group">
												<label class="col-md-5 control-label">Subtotal</label>
												<div class="col-md-7">
													<input type="text" class="form-control" name="bill_electric_other" value="" readonly>
												</div>
											</div>
										</div>
									</div>

									<div class="divider"></div>

									<div class="row mt-10">
										<div class="col-md-6">
										</div>
										<div class="col-md-6">

											<div class="form-group">
												<label class="col-md-6 control-label">Electricity Bill Total</label>
												<div class="col-md-6">
													<input type="text" class="form-control" name="bill_electric_total" value="" readonly>
												</div>
											</div>
											
										</div>
									</div>

								</div>
								<!-- END TAB ELECTRICITY -->

								<!-- BEGIN TAB WATER -->
								<div class="tab-pane fade" id="tab_water">
									
									<div class="row">
										<div class="col-md-6">
											<div class="form-group">
												<label class="col-md-4 control-label">Start Meter</label>
												<div class="col-md-6">
													<input type="text" class="form-control" name="water_usage_start" value="">
												</div>
											</div>
											<div class="form-group">
												<label class="col-md-4 control-label">End Meter</label>
												<div class="col-md-6">
													<input type="text" class="form-control" name="water_usage_end" value="">
												</div>
											</div>
											<div class="form-group">
												<label class="col-md-4 control-label">Total Usage</label>
												<div class="col-md-6">
													<input type="text" class="form-control" name="water_usage_amount" value="" readonly>
												</div>
											</div>
											<div class="form-group">
												<label class="col-md-4 control-label">Rate</label>
												<div class="col-md-6">
													<input type="text" class="form-control" name="water_meter_rate" value="" readonly>
												</div>
											</div>
										</div>
										<div class="col-md-6">
											<div class="form-group">
												<label class="col-md-4 control-label">Fixed Load</label>
												<div class="col-md-6">
													<input type="text" class="form-control" name="bill_water_fixed" value="" readonly>
												</div>
											</div>
											<div class="form-group">
												<label class="col-md-4 control-label">Admin Fee 5%</label>
												<div class="col-md-6">
													<input type="text" class="form-control" name="bill_water_admin" value="" readonly>
												</div>
											</div>
											<div class="form-group">
												<label class="col-md-4 control-label">PPN 10%</label>
												<div class="col-md-6">
													<input type="text" class="form-control" name="bill_water_ppn" value="" readonly>
												</div>
											</div>
										</div>
									</div>

									<div class="divider"></div>

									<div class="row mt-10">
										<div class="col-md-6">
											<div class="form-group">
												<label class="col-md-4 control-label">Subtotal</label>
												<div class="col-md-6">
													<input type="text" class="form-control" name="bill_water_amount" value="" readonly>
												</div>
											</div>
										</div>
										<div class="col-md-6">
											<div class="form-group">
												<label class="col-md-4 control-label">Subtotal</label>
												<div class="col-md-6">
													<input type="text" class="form-control" name="bill_water_other" value="" readonly>
												</div>
											</div>
										</div>
									</div>

									<div class="divider"></div>

									<div class="row mt-10">
										<div class="col-md-6">
										</div>
										<div class="col-md-6">

											<div class="form-group">
												<label class="col-md-6 control-label">Water Bill Grand Total</label>
												<div class="col-md-6">
													<input type="text" class="form-control" name="bill_water_total" value="" readonly>
												</div>
											</div>
											
										</div>
									</div>

								</div>
								<!-- END TAB WATER -->

								<!-- BEGIN TAB OTHER -->
								<div class="tab-pane fade" id="tab_other">

									<div class="row">
										<div class="col-md-12">
											<div class="form-group">
												<label class="col-md-2 control-label">Description</label>
												<div class="col-md-8">
													<input type="text" class="form-control" name="service_charge_description" value="">
												</div>
											</div>
										</div>
										<div class="col-md-6">
										</div>
									</div>

									<div class="divider"></div>
									
									<div class="row mt-10">
										<div class="col-md-6">
											<div class="form-group">
												<label class="col-md-4 control-label">Service Charge</label>
												<div class="col-md-6">
													<input type="text" class="form-control" name="service_charge_rate" value="" readonly>
												</div>
											</div>
											<div class="form-group">
												<label class="col-md-4 control-label">Unit Size</label>
												<div class="col-md-6">
													<input type="text" class="form-control" name="unit_size" value="" readonly>
												</div>
											</div>
											<div class="form-group">
												<label class="col-md-4 control-label">Total SC</label>
												<div class="col-md-6">
													<input type="text" class="form-control" name="bill_service_amount" value="" readonly>
												</div>
											</div>
											<div class="form-group">
												<label class="col-md-4 control-label">SC PPN 10&</label>
												<div class="col-md-6">
													<input type="text" class="form-control" name="bill_service_ppn" value="" readonly>
												</div>
											</div>
										</div>
										<div class="col-md-6">
											<div class="form-group">
												<label class="col-md-4 control-label">Insurance Fee</label>
												<div class="col-md-6">
													<input type="text" class="form-control" name="insurance" value="" readonly>
												</div>
											</div>
											<div class="form-group">
												<label class="col-md-4 control-label">PBB Fee</label>
												<div class="col-md-6">
													<input type="text" class="form-control" name="pbb" value="" readonly>
												</div>
											</div>
											<div class="form-group">
												<label class="col-md-4 control-label">Sinking Fund</label>
												<div class="col-md-6">
													<input type="text" class="form-control" name="sinking_fund" value="" readonly>
												</div>
											</div>
											<div class="form-group">
												<label class="col-md-4 control-label">SLF Fee</label>
												<div class="col-md-6">
													<input type="text" class="form-control" name="slf" value="" readonly>
												</div>
											</div>
											<div class="form-group">
												<label class="col-md-4 control-label">HGB Fee</label>
												<div class="col-md-6">
													<input type="text" class="form-control" name="hgb" value="" readonly>
												</div>
											</div>
											<div class="form-group">
												<label class="col-md-4 control-label">Parking Fee</label>
												<div class="col-md-6">
													<input type="text" class="form-control" name="parking_fee" value="" readonly>
												</div>
											</div>
											<div class="form-group">
												<label class="col-md-4 control-label">Total Other</label>
												<div class="col-md-6">
													<input type="text" class="form-control" name="bill_other_amount" value="" readonly>
												</div>
											</div>
											<div class="form-group">
												<label class="col-md-4 control-label">PPN 10%</label>
												<div class="col-md-6">
													<input type="text" class="form-control" name="bill_other_ppn" value="" readonly>
												</div>
											</div>
										</div>
									</div>

									<div class="divider"></div>

									<div class="row mt-10">
										<div class="col-md-6">
											<div class="form-group">
												<label class="col-md-4 control-label">Subtotal</label>
												<div class="col-md-6">
													<input type="text" class="form-control" name="bill_service_total" value="" readonly>
												</div>
											</div>
										</div>
										<div class="col-md-6">
											<div class="form-group">
												<label class="col-md-4 control-label">Subtotal</label>
												<div class="col-md-6">
													<input type="text" class="form-control" name="bill_other_total" value="" readonly>
												</div>
											</div>
										</div>
									</div>

									<div class="divider"></div>

									<div class="row mt-10">
										<div class="col-md-6">
										</div>
										<div class="col-md-6">

											<div class="form-group">
												<label class="col-md-6 control-label">SC & Other Bill Grand Total</label>
												<div class="col-md-6">
													<input type="text" class="form-control" name="bill_service_other_total" value="" readonly>
												</div>
											</div>
											
										</div>
									</div>

								</div>
								<!-- END TAB OTHER -->

								<!-- BEGIN TAB TOTAL -->
								<div class="tab-pane fade" id="tab_total">
									
									<div class="row">
										<div class="col-md-6">
											<div class="form-group">
												<label class="col-md-5 control-label">Total Electicity Bill</label>
												<div class="col-md-7">
													<input type="text" class="form-control" name="bill_electric_total" value="" readonly>
												</div>
											</div>
											<div class="form-group">
												<label class="col-md-5 control-label">Total Water Bill</label>
												<div class="col-md-7">
													<input type="text" class="form-control" name="bill_water_total" value="" readonly>
												</div>
											</div>
											<div class="form-group">
												<label class="col-md-5 control-label">Total SC & Other Bill</label>
												<div class="col-md-7">
													<input type="text" class="form-control" name="bill_service_other_total" value="" readonly>
												</div>
											</div>
											<div class="form-group">
												<label class="col-md-5 control-label">Stamp Fee</label>
												<div class="col-md-7">
													<input type="text" class="form-control" name="stamp_fee" value="" >
												</div>
											</div>
										</div>
										<div class="col-md-6">
										</div>
									</div>

									<div class="divider"></div>

									<div class="row mt-10">
										<div class="col-md-6">
										</div>
										<div class="col-md-6">
											<div class="form-group">
												<label class="col-md-5 control-label">Bill Grand Total</label>
												<div class="col-md-7">
													<input type="text" class="form-control" name="bill_amount" value="" readonly>
												</div>
											</div>
										</div>
									</div>



								</div>
								<!-- END TAB TOTAL -->

							</div>
							<!-- END TAB -->

						</div>

						<div class="form-actions">
							<div class="row">
								<div class="col-md-12 text-center">
									<a href="<?= base_url('bill/owner_checking') ?>" class="btn btn-circle btn-default"><i class="fa fa-remove"></i> Cancel</a>
									<button type="submit" class="btn btn-circle green"><i class="fa fa-check"></i> Save</button>
								</div>
							</div>
						</div>

					</form>
					
				</div>
			</div>

		</div>
	</div>

<?= $this->endSection() ?>


