<div class="content-container" ng-controller="ViewCenterController">
    <ul class="breadcrumb">
        <li>
            <a ng-href="#/viewoffice/{{center.officeId}}">
                {{center.officeName}}
            </a>
        </li>
        <li>{{center.name}}</li>
    </ul>
    <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 class="card">
        <div class="content">
            <div class="toolbar">
                <h4 class="client-title">
                    <i class="fa fa-circle {{center.status.code | StatusLookup}}">
                    </i>
                    <i class="fa fa-map-marker"></i>
                    <strong>{{center.name}} </strong>
                    <small>
                        <i class="fa fa-barcode"></i>
                        {{ 'label.heading.accnum' | translate }}: {{center.accountNo}} |
                        <i class="fa fa-building"></i>
                        {{ 'label.heading.office' | translate }}: "{{center.officeName}}"
                    </small>
                </h4>
            </div>
            <br>
            <uib-tabset tabset-name="centerTabset scrollable" scrollable>
                <uib-tab heading="{{ 'label.heading.general' | translate }}">
                    <div>
                        <div class="" style="margin-top: 25px; margin-bottom: 25px" 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="fa fa-check-sign "></i>{{'label.button.activate' | translate }}
                                </a>
                                <a href="#/editcenter/{{center.id}}?managecode=2" class="btn btn-primary" has-permission='UPDATE_CENTER'><i class="fa fa-edit "></i>{{ 'label.button.edit' | translate }}</a>
                                <a href="#/addgroup?centerId={{center.id}}&officeId={{center.officeId}}" class="btn btn-primary" has-permission='CREATE_GROUP'><i class="fa fa-plus"></i>{{ 'addgroup' | translate }}</a>
                                <a href="#/managegroupmembers/{{center.id}}" class="btn btn-primary" has-permission='ASSOCIATEGROUPS_CENTER'>
                                    <i class="fa fa-edit "></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="fa fa-file "></i>{{ 'label.button.centersavingapplication' | translate }}</a>
                                <span class="btn-group" uib-dropdown on-toggle="toggled(open)">
                                    <a class="btn btn-primary" uib-dropdown-toggle>
                                        {{ 'label.button.more' | translate}}
                                        <span class="caret"></span>
                                    </a>
                                    <ul class="dropdown  dropdown-menu-right" uib-dropdown-menu>
                                        <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><br>
                        </div>
                            <div class="row">
                                <div class="col-sm-9 col-md-9 ">
                                    <div data-ng-show="center.status.value=='Closed'">
                                        <h3>{{'label.heading.centerclosed' | translate}}</h3>
                                    </div>
                                    <div id="center" class="row">
                                        <div class="col-md-6">
                                            <div class="panel panel-default">
                                                <div class="panel-heading">
                                                    <h3 class="panel-title ng-binding">{{ 'label.heading.groups' | translate }}</h3>
                                                </div>
                                                <div class="panel-body">
                                                    <div class="list-group">
                                                        <a href="#/viewgroup/{{group.id}}" ng-repeat="group in center.groupMembers" class="list-group-item">
                                                            <i uib-tooltip="{{group.status.value}}" class="fa fa-stop {{group.status.code | StatusLookup}}" uib-tooltip=""></i> {{group.name}}
                                                        </a>
                                                        <p ng-if="!center.groupMembers" class="list-group-item">No Groups added.</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6 meeting">
                                            <div class="alert alert-warning" role="alert">
                                                <table>
                                                    <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="fa fa-edit "></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>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                    <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" uib-tooltip="{{savingaccount.status.value}}" class="fa fa-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 uib-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="fa fa-arrow-right "></i>
                                                        </a>
                                                        <a uib-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="fa fa-arrow-right "></i>
                                                        </a>
                                                        <a uib-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="fa fa-arrow-left "></i>
                                                        </a>
                                                        <a uib-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="fa fa-arrow-left "></i>
                                                        </a>
                                                    </td>
                                                    <td class="pointer" ng-if="savingaccount.status.submittedAndPendingApproval">
                                                        <a uib-tooltip="{{'label.button.approve' | translate}}" ng-href="#/savingaccount/{{savingaccount.id}}/approve" class="btn btn-xs btn-primary ng-binding">
                                                            <i class="fa fa-check"></i>
                                                        </a>
                                                    </td>
                                                    <td class="pointer" ng-if="!savingaccount.status.submittedAndPendingApproval && !savingaccount.status.active">
                                                        <a uib-tooltip="{{'label.button.undoapproval' | translate}}" ng-href="#/savingaccount/{{savingaccount.id}}/undoapproval" class="btn btn-xs btn-primary ng-binding">
                                                            <i class="fa fa-undo "></i>
                                                        </a>
                                                        <a uib-tooltip="{{'label.button.activate' | translate}}" ng-href="#/savingaccount/{{savingaccount.id}}/activate" class="btn btn-xs btn-primary ng-binding">
                                                            <i class="fa fa-power-off"></i>
                                                        </a>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="col-sm-3 col-md-3">
                                    <div class="thumbnail">
                                        <div class="">
                                            <h4><strong>{{center.name}} {{ 'label.heading.details' | translate }}</strong></h4>
                                            <table class="table-minified">
                                                <tr data-ng-show="center.externalId">
                                                    <th>{{ 'label.input.externalid' | 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>
                                            <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>
                        <br/>
                    </div>
                </uib-tab>
                <uib-tab heading="{{ 'label.heading.notes' | translate }}"
                has-permission='READ_GROUPNOTE'>
                    <form>
                        <div class="form-group">
                            <div class="">
                                <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="">
                        <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>
                </uib-tab>
                <uib-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="fa fa-trash "></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="fa fa-plus "></i>{{'label.button.add' | translate}}</a>
                        <a data-ng-show="showDataTableEditButton" ng-href="#/viewsingledatatableentry/{{centerdatatable.registeredTableName}}/{{center.id}}?mode=edit" class="btn btn-primary" has-permission='UPDATE_{{centerdatatable.registeredTableName}}'><i
                        class="fa fa-edit "></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" 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>
                </uib-tab>
            </uib-tabset>
            <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>
</div>
