eHealthAfrica/direct-delivery-dashboard

<div class="panel panel-default">
  <div class="panel-heading">
    <div class="row">
      <div class="col-sm-2 pull-left">
        <h4>Delivery Round Reports</h4>
      </div>
      <!-- date range selector -->
      <div class="col-sm-10 pull-right">
        <div class="form-group">

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

              <label>
                <span ng-if="!devRepCtrl.filterType">Filter By Round</span>
                <span ng-if="devRepCtrl.filterType">Filter By Date</span>
              </label>
              <div>
                <label class="switch">
                  <input ng-model="devRepCtrl.filterType" type="checkbox">
                  <i></i>
                </label>
              </div>

            </div>
            <div class="col-md-10">
              <div class="row" ng-if="!devRepCtrl.filterType">
                <div class="col-md-3">
                  <label for="fromDate">Start</label>

                  <div class="input-group">
                    <input id="fromDate" type="text" class="form-control input-lg"
                           ng-model="devRepCtrl.startFrom"
                           datepicker-popup="{{devRepCtrl.dateFormat}}"
                           max-date="devRepCtrl.stopOn"
                           is-open="devRepCtrl.start.opened"/>
                    <span class="input-group-btn">
                      <button type="button" class="btn btn-default btn-lg"
                              ng-click="devRepCtrl.start.open($event)">
                        <i class="fa fa-calendar"></i>
                      </button>
                    </span>
                  </div>
                </div>
                <div class="col-md-3">
                  <label for="fromDate">End</label>
                  <div class="input-group">
                    <input type="text" class="form-control input-lg"
                           ng-model="devRepCtrl.stopOn"
                           min-date="devRepCtrl.startFrom"
                           datepicker-popup="{{devRepCtrl.dateFormat}}"
                           is-open="devRepCtrl.stop.opened"/>
                    <span class="input-group-btn">
                      <button type="button" class="btn btn-default btn-lg"
                              ng-click="devRepCtrl.stop.open($event)">
                        <i class="fa fa-calendar"></i>
                      </button>
                    </span>
                  </div>
                </div>

                <div class="col-md-3">
                  <label></label>
                  <div class="input-group">
                    <button class="btn btn-primary btn-lg" type="button"
                            ng-click="devRepCtrl.getReport()">
                      <i class="fa fa-search"></i>
                      <span>Search</span>
                    </button>
                  </div>
                </div>
              </div>

              <div class="row" ng-if="devRepCtrl.filterType">
                <div class="col-md-6">
                  <eha-round-search
                    ng-model="devRepCtrl.selectedRound"
                    rounds="devRepCtrl.roundCodes"
                    on-select="devRepCtrl.getByRound"
                    is-loading="devRepCtrl.isLoading"
                  ></eha-round-search>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- end of date range selector -->
      </div>
    </div>
    <div class="panel-body">
      <div ng-include="'app/reports/delivery/partials/table/table.html'"></div>
      <div ng-include="'app/reports/delivery/partials/chart/chart.html'"
           ng-if="devRepCtrl.zoneReport.length > 0">
      </div>
    </div>
  </div>
</div>