<div class="col-md-12" ng-controller="ViewCenterController">
	<div>
	    <ul class="breadcrumb">
	        <li><a ng-href="#/viewoffice/{{center.officeId}}">{{center.officeName}}</a></li>
	        <li>{{center.name}}</li>
	    </ul>
	</div>
	<div class="row">
	    <div class="col-md-8 col-sm-8">
	        <h3 class="client-title">
	        	<i class="icon-circle {{center.status.code | StatusLookup}}"></i>
	        	<i class="icon-map-marker"></i>
	            <strong>{{center.name}} </strong>
	            <small>
	            	<i class="icon-barcode"></i> {{ 'label.heading.accnum' | translate }}: {{center.accountNo}} |
	            	<i class="icon-building"></i> {{ 'label.heading.office' | translate }}: "{{center.officeName}}"
	            </small>
	        </h3>
	    </div>
	</div>
	<script type="text/ng-template" id="delete.html">
            <div class="modal-header silver">
                <h3 class="bolder">{{'label.heading.delete' | translate}}</h3>
            </div>
            <div class="modal-body ">
                <api-validate></api-validate>
                <br>
                <button class="btn btn-warning" ng-click="cancel()">{{'label.button.cancel' | translate}}</button>
                <button class="btn btn-primary" ng-click="delete()">{{'label.button.confirm' | translate}}</button>
            </div>
    </script>
	<script type="text/ng-template" id="unassignstaff.html">
            <div class="modal-header silver">
                <h3 class="bolder">{{'label.heading.unassignstaff' | translate}}</h3>
            </div>
            <div class="modal-body ">
                <api-validate></api-validate>
                <br>
                <button class="btn btn-warning" ng-click="cancel()">{{'label.button.cancel' | translate}}</button>
                <button class="btn btn-primary" ng-click="unassign()">{{'label.button.confirm' | translate}}</button>
            </div>
	</script>
	<div>
		<tabset tabset-name="centerTabset">
			<tab heading="{{ 'label.heading.general' | translate }}">
			    <div>
			        <div class="col-md-12 primarydiv" data-ng-hide="center.status.value == 'Closed'">
			            <div class="btn-group pull-right">
			                <a href="#/editcenter/{{center.id}}?managecode=1" class="btn btn-primary" data-ng-hide="center.status.value=='Active'" has-permission='ACTIVATE_CENTER'><i class="icon-check-sign icon-white"></i>{{'label.button.activate' | translate }}</a>
			                <a href="#/editcenter/{{center.id}}?managecode=2" class="btn btn-primary" has-permission='UPDATE_CENTER'>
			                    <i class="icon-edit icon-white"></i>{{ 'label.button.edit' | translate }}</a>
			                <a href="#/addgroup?centerId={{center.id}}&officeId={{center.officeId}}&staffId={{center.staffId}}" class="btn btn-primary" has-permission='CREATE_GROUP'><i
				                    class="icon-plus-sign-alt icon-white"></i>{{ 'addgroup' | translate }}</a>
                            <a href="#/managegroupmembers/{{center.id}}" class="btn btn-primary" has-permission='ASSOCIATEGROUPS_CENTER'>
                                <i class="icon-edit icon-white"></i>{{'label.button.managegroups' | translate }}</a>
			                <a ng-show="center.active" href="#/new_group_saving_application/{{center.id}}/center" has-permission='CREATE_SAVINGSACCOUNT'
			                   class="btn btn-primary"><i class="icon-file icon-white"></i>{{ 'label.button.centersavingapplication' | translate }}</a>
			                <span class="btn-group dropdown" on-toggle="toggled(open)">
			                      <a class="btn btn-primary dropdown-toggle">
			                          {{ 'label.button.more' | translate}}
			                          <span class="caret"></span>
			                      </a>
			                      <ul class="dropdown dropdown-menu dropdown-menu-right">
			                         <li>
                                          <a href="#/centerattendance?centerId={{center.id}}&calendarId={{meeting.id}}"
                                              data-ng-show="center.collectionMeetingCalendar" has-permission='SAVEORUPDATEATTENDANCE_MEETING'>{{
				                                  'label.button.attendance' | translate }}</a>
			                         </li>
			                          <li>
			                              <a href="#/assignstaff/{{center.id}}/centers" data-ng-hide="center.staffId" has-permission='ASSIGNSTAFF_GROUP'>{{
			                                  'label.button.assignstaff' | translate }}</a>
			                          </li>
			                          <li>
			                              <a data-ng-click="unassignStaffCenter()" data-ng-show="center.staffId" has-permission='UNASSIGNSTAFF_GROUP'>{{
			                                  'label.button.unassignstaff' | translate }}</a>
			                          </li>
			                          <li>
			                              <a data-ng-click="deleteCenter()" data-ng-hide="center.status.value=='Active'" has-permission='DELETE_CENTER'>{{
			                                  'label.button.delete' | translate }}</a>
			                          </li>
			                          <li>
			                              <a href="#/closecenter/{{center.id}}" has-permission='CLOSE_CENTER'>{{ 'label.button.close' | translate }}</a>
			                          </li>
			                          <li data-ng-show="center.status.value=='Active'">
			                              <a href="#/attachmeeting/{{center.id}}/centers" data-ng-hide="center.collectionMeetingCalendar" has-permission='CREATE_MEETING'>{{ 'label.button.attachmeeting' | translate }}</a>
			                          </li>

									  <li>
										<a ng-click= "viewStaffAssignmentHistory()" has-permission='READ_Staff Assignment History'>{{ 'label.button.staffassignmenthistory' | translate }}</a>
									  </li>
			                      </ul>
			                  </span>
			            </div>
			        </div>
			        <br/>
			        <div class="col-md-12">
				        <div class="row client">
								<div class="col-sm-8 col-md-8 paddingleft0px">
				                <div data-ng-show="center.status.value=='Closed'">
				                    <h3>{{'label.heading.centerclosed' | translate}}</h3>
								</div>
									<table class="table table-bordered" style="table-layout: fixed;" data-ng-show="groupMemberAccountList">
										<tr class="graybg" ng-show="groupMemberAccountList[0].isShowLoanDetailsInCenterPageEnabled">
											<th class="highlightcol text-right" scope="colgroup" colspan="4">{{'label.heading.groups' | translate}}</th>
											<td colspan="9">
												<table class="col-md-12">
													<tr>
														<td class="highlightcol text-right col-md-2" scope="colgroup" colspan="3">Loan</td>
														<td class="highlightcol text-left col-sm-1" scope="colgroup">Disb.</td>
														<td class="highlightcol text-left col-md-1" scope="colgroup">Balance</td>
														<td class="highlightcol text-left col-md-1" scope="colgroup" colspan="3">Paid</td>
													</tr>
												</table>
											</td>

											<td class="highlightcol text-right" scope="colgroup" colspan="3"></td>
										</tr>

										<tr class="graybg" ng-show="!groupMemberAccountList[0].isShowLoanDetailsInCenterPageEnabled">
											<th class="highlightcol text-left" scope="colgroup" colspan="18">{{'label.heading.groups' | translate}}</th>
										</tr>

										<tbody ng-repeat="group in groupMemberAccountList">
										<tr ng-show="group.isShowLoanDetailsInCenterPageEnabled" class="pointer graybg">
											<th colspan="16" class="pointer" data-ng-click="routeToGroup(group.id)">
												<i tooltip="Group" class="icon-group icon-small"></i>&nbsp;
												<i tooltip-placement="right" tooltip="{{group.status.value}}" class="icon-stop {{group.status.code | StatusLookup}}"></i>
												{{group.name}}
											</th>
										</tr>
										<tr ng-show="!group.isShowLoanDetailsInCenterPageEnabled" class="pointer graybg">
											<th colspan="18" class="pointer" data-ng-click="routeToGroup(group.id)">
												<i tooltip="Group" class="icon-group icon-small"></i>&nbsp;
												<i tooltip-placement="right" tooltip="{{group.status.value}}" class="icon-stop {{group.status.code | StatusLookup}}"></i>
												{{group.name}}
											</th>
										</tr>
										<tr ng-show="group.isShowLoanDetailsInCenterPageEnabled" class="pointer" ng-repeat-start="client in group.activeClientMembers">
											<th  colspan="13" class="pointer text-left" data-ng-click="routeToClient(client.id)">
												&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
												<i tooltip="Client" class="icon-user icon-small"></i>
												<i tooltip-placement="right" tooltip="{{client.status.value}}" class="icon-stop {{client.status.code | StatusLookup}}"></i>
												{{client.accountNo}} - {{client.displayName}}
											</th>
											<td align="center" colspan="3">
												<a class="btn btn-primary btn-sm" ng-href="#/newindividualjlgloanaccount/{{group.id}}/{{client.id}}" data-ng-show="isActiveMember(client.status.code)"><i
														class="icon-plus icon-white"></i>{{ 'label.button.jlgloan' | translate }}</a>

											</td>
										</tr>
										<tr colspan="16" ng-repeat-end ng-show="group.isShowLoanDetailsInCenterPageEnabled" class="pointer" ng-repeat="loan in client.loanAccountSummaryDatas">
											<td class="pointer text-right" colspan="7" data-ng-click="routeToLoan(loan.id)">
												{{loan.accountNo}} - {{loan.shortProductName}}
											</td>
											<td class="pointer text-left" colspan="2" data-ng-click="routeToLoan(loan.id)">
												{{loan.originalLoan}}
											</td>
											<td class="pointer text-left" colspan="2" data-ng-click="routeToLoan(loan.id)">
												{{loan.loanBalance}}
											</td>
											<td class="pointer text-left" colspan="5" data-ng-click="routeToLoan(loan.id)">
												{{loan.amountPaid}}
											</td>
											<!--<td class="pointer text-right" colspan="3" data-ng-click="routeToLoan(loan.id)">-->
											<!--</td>-->
										</tr>

										<tr ng-show="!group.isShowLoanDetailsInCenterPageEnabled" class="pointer" ng-repeat="client in group.activeClientMembers">
											<th  colspan="15" class="pointer text-left" data-ng-click="routeToClient(client.id)">
												&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
												<i tooltip="Client" class="icon-user icon-small"></i>
												<i tooltip-placement="right" tooltip="{{client.status.value}}" class="icon-stop {{client.status.code | StatusLookup}}"></i>
												{{client.accountNo}} - {{client.displayName}}
											</th>
											<td align="center" colspan="3">
												<a class="btn btn-primary btn-sm" ng-href="#/newindividualjlgloanaccount/{{group.id}}/{{client.id}}" data-ng-show="isActiveMember(client.status.code)"><i
														class="icon-plus icon-white"></i>{{ 'label.button.jlgloan' | translate }}</a>
											</td>
										</tr>
										</tbody>
									</table>

				                <div data-ng-show="accounts.savingsAccounts">
						            <div class="span gray-head">
						                  <span class="boldlabel">
						                        <strong>{{'label.heading.savingsaccoverview' | translate }}</strong>
						                  </span>
						            </div>
						            <table class="table table-condensed">
						                <thead>
						                <tr class="graybg">
						                	<th>{{ 'label.heading.accnum' | translate }}</th>
						                    <th>{{ 'label.heading.products' | translate }}</th>
						                    <th>{{ 'label.heading.balance' | translate }}</th>
						                    <th>{{ 'label.heading.actions' | translate }}</th>
						                </tr>
						                </thead>
						                <tbody>
						                <tr class="pointer-main"
						                    ng-repeat="savingaccount in accounts.savingsAccounts | orderBy:'productName':reverse">
						                    <td class="pointer" data-ng-click="routeTo(savingaccount.id)">
						                    	<i tooltip-placement="left" tooltip="{{savingaccount.status.value}}" class="icon-stop {{savingaccount.status.code | StatusLookup}}"></i>
						                    	{{savingaccount.accountNo}}
						                    </td>
						                    <td class="pointer" data-ng-click="routeTo(savingaccount.id)">{{savingaccount.productName}}</td>
						                    <td class="pointer" data-ng-click="routeTo(savingaccount.id)">{{savingaccount.accountBalance}}</td>
						                    <td class="pointer" ng-if="savingaccount.status.active">
							                	<a tooltip="{{'label.button.deposit' | translate}}" ng-href="#/savingaccount/{{savingaccount.id}}/deposit" class="btn btn-xs btn-primary ng-binding" ng-show="savingaccount.depositType.id == '100'">
							                		<i class="icon-arrow-right icon-white"></i>
							                	</a>
			                                          <a tooltip="{{'label.button.deposit' | translate}}" ng-href="#/recurringdepositaccount/{{savingaccount.id}}/deposit" class="btn btn-xs btn-primary ng-binding" ng-show="savingaccount.depositType.id == '300'">
			                                              <i class="icon-arrow-right icon-white"></i>
			                                          </a>
							                	<a tooltip="{{'label.button.withdraw' | translate}}" ng-href="#/savingaccount/{{savingaccount.id}}/withdrawal" class="btn btn-xs btn-primary ng-binding" ng-show="savingaccount.depositType.id == '100'">
							                		<i class="icon-arrow-left icon-white"></i>
							                	</a>
			                                          <a tooltip="{{'label.button.withdraw' | translate}}" ng-href="#/recurringdepositaccount/{{savingaccount.id}}/withdrawal" class="btn btn-xs btn-primary ng-binding" ng-show="savingaccount.depositType.id == '300'">
			                                              <i class="icon-arrow-left icon-white"></i>
			                                          </a>
							                </td>
							                <td class="pointer" ng-if="savingaccount.status.submittedAndPendingApproval">
							                	<a tooltip="{{'label.button.approve' | translate}}" ng-href="#/savingaccount/{{savingaccount.id}}/approve" class="btn btn-xs btn-primary ng-binding">
							                		<i class="icon-ok icon-white"></i>
							                	</a>
							                </td>
							                <td class="pointer" ng-if="!savingaccount.status.submittedAndPendingApproval && !savingaccount.status.active">
							                	<a tooltip="{{'label.button.undoapproval' | translate}}" ng-href="#/savingaccount/{{savingaccount.id}}/undoapproval" class="btn btn-xs btn-primary ng-binding">
							                		<i class="icon-undo icon-white"></i>
							                	</a>
							                	<a tooltip="{{'label.button.activate' | translate}}" ng-href="#/savingaccount/{{savingaccount.id}}/activate" class="btn btn-xs btn-primary ng-binding">
							                		<i class="icon-ok-sign icon-white"></i>
							                	</a>
							                </td>
						                </tr>
						                </tbody>
						            </table>
						        </div>
				            </div>
				            <div class="col-sm-4 col-md-4">
						    	<div class="thumbnail row">
							    	<div class="col-md-12 paddingleft0px">
							    	    <h4><strong>{{center.name}} {{ 'label.heading.details' | translate }}</strong></h4>
							        	<table class="table-minified">
								            <tr data-ng-show="center.externalId">
								                <th>{{ 'label.input.centerexternalid' | translate }}</th>
								                <td><span class="padded-td">{{center.externalId}}</span>
								                </td>
								            </tr>
								            <tr data-ng-show="center.activationDate">
						                        <th>{{ 'label.heading.activationdate' | translate }}</th>
						                        <td><span class="padded-td">{{center.activationDate | DateFormat}}</span>
						                        </td>
						                    </tr>
						                    <tr data-ng-show="center.staffName">
						                        <th>{{ 'label.heading.staff' | translate }}</th>
						                        <td><span class="padded-td">{{center.staffName}}</span>
						                        </td>
						                    </tr>
						                </table>
										<br/>
										<div class="alert alert-warning" role="alert">
											<h4><strong>{{ 'label.heading.meeting' | translate }}</strong></h4>
											<table class="table-minified">
												<tr>
													<td><strong>{{ 'label.heading.nextmeetingon' | translate }}</strong></td>
													<td><span class="padded-td">{{center.collectionMeetingCalendar.nextTenRecurringDates[0] | DateFormat}}&nbsp;
							                            <a href="#/editcalendar/centers/{{center.id}}/{{center.collectionMeetingCalendar.id}}"
														   ng-show="center.collectionMeetingCalendar" has-permission='UPDATE_MEETING'><i class="icon-edit icon-white"></i></a>
							                         <span class="marginleftn7px" data-ng-hide="center.collectionMeetingCalendar.nextTenRecurringDates[0]">{{ 'label.unassigned' | translate }}</span></span>
													</td>
												</tr>
												<tr data-ng-show="center.collectionMeetingCalendar.humanReadable">
													<td><strong>{{ 'label.heading.meetingfrequency' | translate }}</strong></td>
													<td><span class="padded-td">{{center.collectionMeetingCalendar.humanReadable}}</span></td>
												</tr>
												<tr data-ng-show="center.status.value=='Closed'">
													<td><strong>{{ 'label.heading.closedate' | translate }}</strong></td>
													<td><span class="padded-td">{{center.timeline.closedOnDate | DateFormat}}</span></td>
												</tr>
												<tr>
													<td><strong>{{'label.input.meetingtime' | translate}}</strong></td>
													<td><span class="padded-td">{{meetingtime  | date:"h:mma"}}</span></td>
												</tr>
											</table>
										</div>
						                <h4><strong>{{ 'label.heading.summary' | translate }}</strong></h4>
								        <table class="table-minified">
								            <tr>
						                        <th>{{ 'label.numofactiveclient' | translate }}</th>
						                        <td><span class="padded-td">{{summary.activeClients}}</span></td>
						                    </tr>
						                    <tr>
						                        <th>{{ 'label.numofactivegrouploans' | translate }}</th>
						                        <td><span class="padded-td">{{summary.activeGroupLoans}}</span></td>
						                    </tr>
						                    <tr>
						                        <th>{{ 'label.numofactiveclientloans' | translate }}</th>
						                        <td><span class="padded-td">{{summary.activeClientLoans}}</span></td>
						                    </tr>
						                    <tr>
						                        <th>{{ 'label.numofactivegroupborrowers' | translate }}</th>
						                        <td><span class="padded-td">{{summary.activeGroupBorrowers}}</span></td>
						                    </tr>
						                    <tr>
						                        <th>{{ 'label.numofactiveclientborrowers' | translate }}</th>
						                        <td><span class="padded-td">{{summary.activeClientBorrowers}}</span></td>
						                    </tr>
						                    <tr>
						                        <th>{{ 'label.numofactiveoverduegrouploans' | translate }}</th>
						                        <td><span class="padded-td">{{summary.overdueGroupLoans}}</span></td>
						                    </tr>
						                    <tr>
						                        <th>{{ 'label.numofactiveoverdueclientloans' | translate }}</th>
						                        <td><span class="padded-td">{{summary.overdueClientLoans}}</span></td>
						                    </tr>
								        </table>
							    	</div>
						    	</div>
						    </div>
				        </div>
			        </div>
			        <br/>
			    </div>
			</tab>
			<tab heading="{{ 'label.heading.notes' | translate }}" has-permission='READ_GROUPNOTE'>
			    <br/>

			    <form>
			        <div class="form-group">
			            <div class="col-sm-12 col-md-12">
			                <textarea rows="1" class="form-control marginbottom0px" id="textarea"
			                          placeholder="{{ 'label.input.enternote' | translate }}" ng-model="formData.note"></textarea>

			                <div class="notewrapper col-md-12">
			                        <span class="pull-right noteaddbuttonwrapper">
			                            <button class="btn btn-primary" type="submit" ng-click="saveNote()" has-permission='CREATE_GROUPNOTE'>{{ 'label.button.add' | translate }} </button>
			                        </span>
			                </div>
			            </div>
			        </div>
			    </form>
				<div class="col-md-12">
					<br/>
					<div ng-repeat="note in notes | orderBy:predicate:reverse">
				        <blockquote>
				            <p>{{note.note}}</p>
				            {{note.id}}
				            <small>{{'label.createdby' | translate}} :&nbsp;{{note.createdByUsername}}</small>
				            <small>{{'label.createdon' | translate}} :&nbsp;{{note.createdOn | DateFormat}}</small>
				        </blockquote>
					</div>
				</div>
			    </ul>
			</tab>
			</tab>
			<tab heading="{{centerdatatable.registeredTableName}}" ng-repeat="centerdatatable in centerdatatables" has-permission='READ_{{centerdatatable.registeredTableName}}'
		     select="dataTableChange(centerdatatable)">
		    <div data-ng-hide="isClosedCenter" class="btn-group pull-right">
		        <a ng-show="datatabledetails.isData" class="btn btn-danger pull-right"
		           ng-click="deleteAll(centerdatatable.registeredTableName, center.id)"
		           has-permission='DELETE_{{centerdatatable.registeredTableName}}'><i class="icon-trash icon-white"></i>{{'label.button.deleteall'
		            | translate}}</a>
		        <a data-ng-show="showDataTableAddButton"
		           ng-href="#/makedatatableentry/{{centerdatatable.registeredTableName}}/{{center.id}}?fromEntity=center"
		           class="btn btn-primary" has-permission='CREATE_{{centerdatatable.registeredTableName}}'><i
		                class="icon-plus icon-white"></i>{{'label.button.add' | translate}}</a>
		        <a data-ng-show="showDataTableEditButton"
		           ng-href="#/viewsingledatatableentry/{{centerdatatable.registeredTableName}}/{{center.id}}?mode=edit&&fromEntity=center"
		           class="btn btn-primary" has-permission='UPDATE_{{centerdatatable.registeredTableName}}'><i
		                class="icon-edit icon-white"></i>{{'label.button.edit' | translate}}</a>
		    </div>
		    <br>
		    <br>

		    <div data-ng-show="datatabledetails.isData">
		        <table class="table" data-ng-show="datatabledetails.isMultirow">
		            <thead>
		            <th ng-repeat="column in datatabledetails.columnHeaders">{{column.columnName | prettifyDataTableColumn}}</th>
		            </thead>
		            <tbody>
		                <tr class="pointer-main" ng-repeat="data in datatabledetails.data">
		                    <td ng-repeat="row in data.row track by $index" class="pointer" ng-click="viewDataTable(centerdatatable.registeredTableName,data)">{{row}}</td>
		                </tr>
		            </tbody>
		        </table>
		        <table class="table table-bordered width450px" data-ng-hide="datatabledetails.isMultirow">
		            <tr ng-repeat="value in singleRow">
		                <td class="graybg table-font-nav">{{value.key | prettifyDataTableColumn}}</td>
		                <td><span class="padded-td">{{value.value}}</span></td>
		            </tr>
		        </table>
		    </div>
		</tab>
		</tabset>


		<div>
			<audit-logs></audit-logs>
		</div>


		<div id="printcontent" class="autowidth">
			<span class="pull-left"><iframe id="rptLoadingFrame" ng-src="{{baseURL}}" frameborder="0" width="400%" height="800px"></iframe></span>
		</div>
	</div>
</div>

