eHealthAfrica/direct-delivery-dashboard

<div class="panel panel-default">
  <div class="panel-heading">
    <h2 class="panel-title">
      Facility CCE Status Report
    </h2>

    <div class="panel-body" ng-if="facAllCtrl.facilities.length === 0">
      <div class="alert alert-info">
        <i class="fa fa-lg fa-info-circle"></i> No facility with faulty CCE found
      </div>
    </div>

    <div class="panel-body" ng-if="facAllCtrl.facilities.length > 0">
      <div class="row">
        <div class="col-sm-3">
          <h4>
            <span ng-bind="facAllCtrl.selected.name"></span>
            <span ng-bind="facAllCtrl.selected.type"></span>
            Report
          </h4>
        </div>
        <div class="col-sm-9">
          <div class="btn-group" dropdown dropdown-append-to-body>
            <button id="btn-for-zone" type="button" class="btn btn-default" dropdown-toggle>
              <span ng-bind="facAllCtrl.selected.zone || 'Select Zone to Display'"></span> <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu" aria-labelledby="btn-append-to-body">
              <li role="menuitem"></li>
              <li
                ng-repeat="zone in facAllCtrl.list.zone"
                ng-click="facAllCtrl.updateLocation(zone, 'zone')"
                role="menuitem"
                ng-bind="zone"></li>

            </ul>
          </div>

          <div class="btn-group" dropdown dropdown-append-to-body>
            <button id="btn-for-lga" type="button" class="btn btn-default" dropdown-toggle>
              <span ng-bind="facAllCtrl.selected.lga || 'Select LGA to Display'"></span> <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu" aria-labelledby="btn-append-to-body">
              <li role="menuitem"></li>
              <li
                ng-repeat="lga in facAllCtrl.list.lga"
                ng-click="facAllCtrl.updateLocation(lga, 'lga')"
                role="menuitem"
                ng-bind="lga"></li>

            </ul>
          </div>

          <div class="btn-group" dropdown dropdown-append-to-body>
            <button id="btn-for-ward" type="button" class="btn btn-default" dropdown-toggle>
              <span ng-bind="facAllCtrl.selected.ward || 'Select Ward to Display'"></span> <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu" aria-labelledby="btn-append-to-body">
              <li role="menuitem"></li>
              <li
                ng-repeat="ward in facAllCtrl.list.ward"
                ng-click="facAllCtrl.updateLocation(ward, 'ward')"
                role="menuitem"
                ng-bind="ward"></li>

            </ul>
          </div>
        </div>
      </div>


      <div class="row">
        <div class="col-sm-12">
          <table class="table table-striped">
            <thead>
            <tr>
              <th></th>
              <th>Zone</th>
              <th>LGA</th>
              <th>Ward</th>
              <th>Facility</th>
              <th>Last Modified</th>
              <th>CCE Status</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="report in facAllCtrl.selectedLocation">
              <td></td>
              <td ng-bind="report.zone"></td>
              <td ng-bind="report.lga"></td>
              <td ng-bind="report.ward"></td>
              <td ng-bind="report.name"></td>
              <td>
                <span ng-show="!report.status.date" class="label label-default">
                  Not Modified
                </span>
                 <span ng-show="report.status.date" class="label label-info">
                  {{report.status.date | date}}
                </span>
              </td>
              <td>
                <span class="pointer" ng-click="facAllCtrl.updateStatus(report)">
                  <i ng-class="{'fa fa-times text-danger': !facAllCtrl.facilityStatus[report._id].status, 'fa fa-check text-success': facAllCtrl.facilityStatus[report._id].status}"></i>
                </span>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>